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即使 完全 不 懂 CSS， 也 能 轻松 创建 出 美观 的 网 页 
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TEX- 托马斯 (JeremyThomas ) 
Bulma 之 父 ， 从 事 网 页 设计 十 余年 ， 曾 任职 于 索 
尼 、 微 软 、 路 易 威 登 以 及 多 家 科技 初创 企业 。 

















奥 列 克 西 $ 波切 辛 (Oleksii Potiekhin ) 

专业 Web 开 发 人 员 ， 有 多 年 跨 平台 交互 界面 设 
计 和 开发 经 验 ， 曾 与 沃尔沃 、 大 众 、 和 雷诺、 汤 森 
路 透 等 公司 合作 过 。 











米 科 : 劳 哈 卡 里 (vito Lauhakari ) 
Web 咨 询 师 、 技 术 顾问 ， 热 衷 于 创建 Web， 拥 
有 丰富 的 编程 语言 知识 。 


阿 斯 拉 姆 沙 ( Aslam Shah ) 
Risk.ldent 公 司 高 级 JavaScript 开 发 人 员 ， 在 
为 中 小 型 企业 开发 前 端 界面 方面 拥有 多 年 经 验 。 




















BX = 伯 宁 ( Dave Berning ) 
拥有 多 年 Web 开 发 经 验 ， 擅 长 使 用 Vue 和 React 
创建 富 渐进 式 Web 应 用 程序 。 
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来 自 高 德 生 态 技 术 前 端 团 队 ， 曾 任职 于 百度 、 
美 团 ， 致 力 于 前 端 快速 开发 、 高 性 能 框架 以 及 
跨 平台 、 跨 终端 的 UI 泻 染 技术 探索 ， 以 拓展 前 
端 边 界 为 目标 。 






































张 俊 达 
前 端 开 发 工程 师 ， 关 注 前 端 领域 的 新 技术 ， 乐 
于 分 享 。 译 作 包括 《React 快 速 上 手 开 发 》《 同 
构 JavaScript 应 用 开发 》《 React Native 开 发 
指南 ( 第 2 版 ) 》《PWA 开 发 实战 》《 Web 性 
能 实战 》。 
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图 灵 社 区 的 电子 书 没有 采用 专 有 客户 
端 ， 您 可 以 在 任意 设备 上 ， 用 自己 喜 
欢 的 浏览 器 和 PDF 阅读 器 进行 阅读 。 
但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 民 知 和 
觉悟 ， 与 我 们 共同 保护 知识 产权 。 
如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 对 
该 用 户 实施 包括 但 不 限于 关闭 该 帐号 
等 维权 措施 ， 并 可 能 追究 法 律 责任 。 
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内 容 提 要 


Bulma 是 一 个 流行 的 开源 CSS 框架 ， 轻 量 而 易 用 。 借 助 它 ， 即 使 不 会 编写 CSS, 
也 能 轻松 创建 出 美观 的 网 页 。 本 书 通过 生动 实例 细致 讲解 如 何 使 用 Bulma 框架 从 
头 创建 Web 应 用 。 主 要 内 容 包括 : Bulma 的 基本 概念 与 特性 ， 如 何 使 用 Bulma 创 
建 页 面 布局 ，Bulma 组 件 如 何 工 作 ， 如 何 设计 具体 的 UI 元 素 ， 如 何 将 Bulma RA 
JavaScript， 如 何 将 Bulma 与 流行 的 前 端 框架 React, Angular 和 Vue.js 集成 ， 等 等 

本 书 适合 前 端 开发 人 员 阅 读 。 
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在 2007 年 的 一 党 无 障碍 设计 课 上 , 我 偶然 接触 到 了 CSS。 当 时 老师 
强调 了 编写 页 面 时 将 内 容 和 样式 分 离 的 必要 性 ， 并 教授 了 如 何 通 过 CSS 
来 实现 。 这 次 相遇 对 我 来 说 意义 重大 ， 让 我 意识 到 只 需 编写 简单 的 CSS 
代码 ， 就 可 以 实现 想 要 的 界面 效果 ， 不 再 需要 使 用 Dreamweaver 和 复杂 
的 表格 布局 方式 。 这 次 经 历 也 影响 了 我 的 职业 生涯 ， 最 终 我 成 为 了 一 名 
Web 开发 者 。 


随后 的 十 年 里 , 我 学 习 了 PHP, JavaScript, Ruby, Node 等 各 种 Web 
开发 技能 , 但 CSS 一 直 是 我 掌握 得 最 深 的 一 门 技术 , 也 是 我 的 立身 之 本 。 
在 这 段 时 间 里 ，CSS 的 许多 新 特性 也 得 到 了 众多 浏览 器 的 支持 和 良好 的 
发 展 。 我 可 以 使 用 阴影 、 圆 角 、 自 定义 字体 和 渐变 色 等 功能 来 实现 视觉 
效果 , 而 不 用 再 通过 PNG 图片 进行 模拟 。 尤其 值得 一 提 的 是 , 2015 年 底 ， 
CSS 推出 了 一 种 新 的 布局 模型 Flexbox， 并 且 该 功能 迅速 流行 开 来 。 

Flexbox 革新 了 传统 Web 开发 中 使 用 的 布局 方式 ， 列 的 布局 不 再 依 
赖 CSS 浮动 、 清 除 浮动 技巧 和 复杂 的 标记 结构 来 实现 ， 而 是 通过 定义 容 
器 实现 列 布局 自 适应 ， 得 到 自己 的 栅 格 系统 。 这 可 以 极 大 地 简化 HTML 
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brid. “4K, Flexbox 还 可 以 实现 一 些 新 的 、 强 大 的 、 令 人 耳目 一 新 的 东 
西 ， 极 具 潜 力 。 


在 发 现 Flexbox 的 时 候 ， 我 使 用 一 个 小 型 的 Sass 框架 已 有 数 月 ， 这 
是 我 自己 开发 和 维护 的 CSS 框架 。 我 利用 它 开 发 了 许多 个 人 的 和 专业 的 
CSS 项 目 。CSS 框架 的 主要 目标 是 简化 页 面 的 布局 ， 而 Flexbox 正 提供 
了 这 样 的 功能 。Flexbox 可 以 通过 清晰 、 灵 活 的 标记 结构 解决 页 面 布局 问 
题 ， 这 使 得 它 成 为 了 一 种 近乎 完美 的 布局 解决 方案 。Bulma 最 初 是 我 开 
发 的 一 个 CSS 生成 器 ， 以 胶 圳 式 代 码 作为 模块 组 件 ， 但 最 后 我 决定 抛弃 
这 个 想法 ， 转 而 将 我 的 Sass 框架 和 最 近 掌握 的 Flexbox 知识 结合 起 来 ， 
编写 出 一 个 新 的 现代 CSS 框架 ，Bulma 由 此 诞生 。 


作为 开源 社区 的 拥护 者 , 我 将 自己 的 CSS 框架 代码 上 传 到 了 GitHub 
上 ， 并 在 各 种 技术 论坛 和 社交 网 站 上 进行 分 享 。 我 认为 如 果 这 个 小 框架 
解决 了 自己 的 问题 ， 那 么 也 能 帮助 别人 解决 问题 。 虽 然 刚 发 布 的 时 候 未 
掀起 波澜 ,没有 获得 太 多 关注 , 但 不 久 便 风 靡 开 来 , 成 为 了 GitHub 上 的 
热门 项 目 ， 并 登 上 了 Hacker News 和 Product Hunt 的 首页 ， 还 在 Twitter 
上 被 分 享 了 数 百 次 。 这 让 我 意识 到 该 项 目 不 仅 有 趣 ， 还 很 实用 。 但 我 依 
SRB: 也 许 Bulma 的 流行 只 是 县 花 一 现 ， 而 事实 是 它 得 到 了 越 来 越 多 
的 关注 。 


经 过 两 年 的 发 展 , Bulma 在 GitHub 上 已 经 得 到 了 24000 多 颗 星 , 下 
载 和 安装 次 数 超过 100 万 。150 位 开发 者 参与 贡献 并 解决 了 860 个 问题 ， 
合并 了 300 多 个 代码 请 求 。 这 段 历 程 也 展现 了 开源 社区 如 何 将 一 个 小 型 
CSS 项 目 转变 成 Web 开发 的 重要 资源 。 考 虑 到 Bulma 催生 出 了 众多 华丽 
的 网 站 ， 推 动 了 众多 企业 的 蓬勃 发 展 ， 我 相信 Bulma 一 定 会 持续 成 长 并 
得 到 广泛 应 用 。 
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在 此 过 程 中 我 收获 民 多 , 包括 新 的 CSS 功能 特性 知识 和 更 优雅 的 
编程 技巧 。 很 多 用 户 表达 了 对 Bulma 的 热爱 ， 称 赞 它 简 单 易 用 ， 但 对 
我 来 说 ， 最 大 的 收获 是 能 帮助 成 干 上 万 的 开发 者 更 民意 地 遵 游 Web 
世界 。 


Dll} 


目标 读者 


本 书 适 合 任何 想 了 解 并 使 用 Bulma 及 其 组 件 和 布局 系统 来 编写 Web 
界面 的 设计 师 和 开发 者 阅读 。 


即使 不 熟悉 Bulma 也 不 必 担 心 ， 这 个 框架 简单 易学 ， 儿 分 钟 就 能 
EF. 


阅读 前 提 


阅读 本 书 不 需要 了 解 Bulma, 只 需要 大 致 了 解 HTML 和 CSS 的 工作 
机 制 ， 因 为 Bulma 的 目标 就 是 让 你 尽 可 能 少 地 编写 CSS 来 实现 需要 的 
功能 。 

还 需要 一 个 代码 编辑 器 ，Sublime Text, Atom, Notepad++, Intellij, 
Vim, Emacs 等 都 可 以 。 唯 一 的 要 求 是 具备 语法 高 完 和 按 指 定 后 级 ( 比 
如 .html、.css ) 保存 文件 的 功能 。 
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还 需要 一 个 现代 浏览 器 ， 比 如 Google Chrome, Mozilla Firefox 、 
Microsoft Edge 或 者 Safari 浏览 器 。 
在 线 出 版 管理 系统 代码 示例 

本 书 使 用 的 在 线 出 版 管理 系统 示例 的 所 有 代码 的 下 载 地 址 如 下 “: 


https://github.com/troymott/bulma-book-code。 


本 书 内 容 


本 书 会 一 步 一步 地 指导 你 基于 Bulma 从 零 开 始 创建 一 个 Web 应 用 。 


书 中 会 以 一 个 可 登录 的 管理 图 书 、 用 户 和 订单 的 在 线 出 版 管理 系统 
作为 示例 ,指导 你 如 何 使 用 Bulma。 之 所 以 选择 这 个 系统 作为 教程 示例 ， 
是 因为 该 系统 基本 包含 了 所 有 网 站 或 CMS 都 具备 的 CRUD (create, 
read，update，delete， 即 创建 、 读 取 、 更 新 、 删 除 ) 功能 。 





口 如 何 使 用 Bulma 设计 布局 ; 
口 如 何 使 用 Bulma 提供 的 组 件 ; 
口 如 何 创建 自 定义 UI 元 素 ; 

口 如 何 创建 自 定 义 组 件 。 








本 书 还 将 展示 如 何 通过 如 下 前 端 框 架 将 Bulma 与 JavaScript 集成 : 
React, Angular, Vue.js. 








@ 你 可 以 直接 访问 本 书 中 文 版 页 面 ， 下 载 本 书 项 目的 源 代码 : https://www.ituring.com. 
cn/book/2611， 也 可 在 此 查看 或 提交 勘误 。 一 一 编者 注 

















作者 简介 


杰 里 米 ' 托马斯 从 事 网 页 设计 逾 10 年 。 他 曾 在 法 国学 习 平 面 设计 ， 
在 一 堂 无 障碍 设计 课 上 接触 到 了 CSS , 对 其 一 见 钟情 并 决定 以 此 为 职业 。 
他 曾 任职 于 索尼 、 微 软 、 路 易 威 登 以 及 科技 初创 企业 ， 也 做 过 自由 职业 
者 和 培训 讲师 。 


2016 年 初 ， 他 开发 了 一 个 小 型 框架 作为 开发 项 目的 脚手架 ， 并 将 该 
框架 的 代码 开源 ，Bulma 由 此 道生 。 之 后 他 一 直 活 跃 于 开源 社区 ， 发 布 
了 MarkSheet、CSS 指南 、HTML 指南 和 Web 设计 的 4 分 钟 系列 教程 。 
他 的 目标 是 不 断 分 享 他 从 日 常 工作 中 获得 的 知识 。 


合 著者 和 贡献 者 


奥 列 克 西 : 波切 辛 是 一 位 专业 的 Web FRAR, 有 9 年 多 的 跨 平台 
交互 界面 设计 和 开发 经 验 。 他 曾 与 沃尔沃 、 斯 堪 尼 亚 、 大 众 、 雷 诺 、 约 
翰 :刘易斯 合伙 公司 ` 汤 森 路 透 等 公司 合作 过 。2017 年 ,他 迷 上 了 Bulma, 
因为 它 功能 完备 ， 能 为 任何 类 型 的 项 目 构建 现代 UL 

KE- 劳 哈 卡 里 热衷 于 创建 Web ， 是 个 Web 迷 。 自 第 一 轮 互联 网 泡 


沫 破灭 后 ， 他 一 直 对 Web 充满 热情 。 他 曾 在 瑞典 卡尔 马尔 大 学 学 习 网 络 
编程 ， 拥 有 丰富 的 编程 语言 知识 。 


阿 斯 拉 姆 沙 是 Risk.Ident 公司 的 高 级 JavaScript 开发 人 员 ， 在 为 中 
小 型 企业 开发 前 端 接口 方面 拥有 5 年 以 上 经 验 。 他 认为 技术 永远 不 会 停 
步 ， 因 此 我 们 必须 不 断 学 习 ， 与 时 俱 进 ， 弃 旧 纳 新 。 


戴 夫 ' 伯 宁 拥有 6 年 多 的 Web 开发 经 验 。 他 毕业 于 辛辛那提 大 学 ， 
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其 间 学 习 用 HTML, CSS 和 JavaScript 开发 网 站 ， 擅 长 使 用 Vue 和 React 
创建 富 渐 进 式 Web 应 用 程序 。 他 还 是 alligator.io 的 一 名 作者 ， 是 辛 辛 那 
提 CodePen 的 组 织 者 ， 组 织 过 多 场 前 端 新 技术 研讨 会 。 








电子 书 


扫描 如 下 二 维 码 ， 即 可 购买 本 书 中 文 版 电子 版 。 


理解 Bulma 及 其 术语 和 概念 


1.1 
1.2 
1.3 


14 4 


1.5 
1.6 
1.7 
1.8 


Bulma 表单 开发 
模板 要 求 …… 


2.1 
2.2 


Bulma 有 何 独 特 之 处 ……… 
简易 的 机 格 系统 …………… 
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小 结 


大 全 == 


1 
理解 Bulma 及 其 术语 和 概念 


或 许 你 之 前 听 说 过 Bulma; 如 果 没 有 , 也 没关系 。 如 前 所 述 ，Bulma 
是 一 个 轻 量 级 、 可 配置 的 CSS 框架 ， 完 全 基于 Flexbox. Flexbox 是 一 个 
相对 较 新 的 CSS 规范 ， 在 本 书 编写 时 ， 它 得 到 了 浏览 器 的 良好 支持 。 


Bulma 底层 使 用 Flexbox 来 运行 ， 并 帮助 你 解决 了 使 用 Flexbox 时 
需要 考虑 的 难点 。 使 用 Bulma 无 须 了 解 Flexbox， 但 应 掌握 基本 的 CSS 


知识 。 


本 章 将 从 较 高 的 层次 介绍 Bulma, 带 你 熟悉 Bulma 及 其 术语 和 概念 。 


1.1 Bulma 有 何 独特 之 处 


与 其 他 CSS 框架 相 比 ，Bulma 有 如 下 不 同 之 处 。 


口 现代 化 : 整个 Bulma 是 基于 CSS Flexbox 设计 的 。 
口 响应 式 : Bulma 的 设计 同时 支持 移动 端 和 桌面 设备 。 
口 易学 : 大 多 数 用 户 只 需 几 分 钟 便 能 入 门 。 
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O 语法 简单 : Bulma 使 用 更 少 的 HTML, 所 以 代码 易于 阅读 和 编写 。 
O 可 定制 : Bulma 提供 了 300 多 个 SASS 变量 , 基于 这 些 样式 变量 ， 
你 可 以 定制 自己 的 主题 框架 。 

口 JavaScript: Bulma 完全 基于 CSS 设计 编写 ， 因 此 可 以 很 优雅 
地 与 任何 JavaScript 框架 ( Angular、Vue.js、React、Ember 或 者 
纯 JavaScript 应 用 ) 集成 。 





1.2 简易 的 栅 格 系统 


Bulma 最 著名 的 当 属 其 简单 明了 的 栅 格 架构 : 


<div class="columns"> 
<div class="column"> 
<!-- 第 1 列 --> 
</div> 
<div class="column"> 
<!-- 第 2 列 --> 
</div> 
</div> 


就 是 这 样 ， 只 需 两 个 CSS 类 (columns 作为 容器 类 ，column 作为 其 
子 类 )， 即 可 实现 响应 式 栅 格 系统 ,无 须 指 定 其 他 任何 维度 ， 两 列 会 自动 
分 占 宽度 的 50%, 


如 果 想 要 第 3 列 ， 只 需 再 添加 一 个 column 即 可 : 


<div class="columns"> 
<div class="column"> 
<!-- 第 1 列 --> 
</div> 
<div class="column"> 
<!-- 第 2 列 --> 
</div> 
<div class="column"> 
<!-- 第 3 列 --> 
</div> 
</div> 


14 可 定制 | 3 


每 一 列 会 自动 占据 33% 的 宽度 ， 无须 编 写 额外 的 代码 。 如 果 想 要 
更 多 列 ， 按 上 述 操作 添加 column 即 可 实现 ，Bulma 会 帮 你 自动 适 配 
大 小 。 


1.3 ”可 读 性 


Bulma 简单 易学 ， 因 为 它 的 代码 简洁 易 读 。 下 面 是 一 个 Bulma 按钮 
的 代码 ， 仅 需 添 加 一 个 button 类 即 可 实现 。 


<a class="button"> 
Save changes 
</a> 


为 了 扩展 该 按钮 的 功能 ，Bulma 提供 了 修饰 符 类 ， 用 于 给 基础 的 按 
钮 提供 其 他 样式 。 要 对 该 按钮 应 用 主 色调 青绿 色 ， 并 增 大 尺寸 ， 只 需 添 
加 is-primary 类 和 is-large 类 : 

<a class="button is-primary is-large"> 


Save changes 
</a> 


fem: 最 好 使 用 “primary”“secondary” 这 样 的 主 次 命名 约定 。 
这 将 有 助 于 给 样式 赋予 一 些 意义 ， 并 为 以 后 的 定制 留 有 余地 。 
1.4 可 定制 


Bulma 有 300 多 个 变量 ， 几 乎 可 以 覆盖 Bulma 中 的 所 有 属性 ， 因 此 
可 以 高 度 定义 个 性 化 设置 。 


使 用 SASS， 可 以 设置 初始 变量 ， 比 如 覆盖 blue 的 颜色 值 、 设 置 默 
认 字 体 甚 至 各 种 响应 式 断 点 。 





4 





第 1 章 理解 Bulma 及 其 术语 和 概念 





// 1. 导 入 默认 变量 

@import "../sass/utilities/initial-variables" 
@import "../sass/utilities/functions" 

// 2. 设 置 初始 变量 

// 更 新 blue 的 颜色 值 

SbLue: #72d0eb 


// 设置 pink 4 pink-invert 颜色 值 


Spink: #ffb3b3 
Spink-invert: #fff 


// 添加 serif 字体 


Sfamily-serif: "Merriweather", "Georgia", serif 


// 3. 设 置 衍生 的 变量 值 

// 将 新 设置 的 pink 色 作 为 默认 主 色 调 
Sprimary: Spink 

Sprimary-invert: Spink-invert 


// 将 默认 的 orange 色 作 为 危险 色 号 


Sdanger: Sorange 


// 使 用 新 设置 的 serif 字体 
Sfamily-primary: $family-serif 


// 4. 导 入 其 余 Bulma 代码 
@import "../bulma" 


每 一 个 Bulma 组 件 都 有 自己 的 变量 集合 : 


口 box 组 件 具 有 阴影 ; 

O columns 有 默认 空白 ; 

O menu 有 默认 的 背景 色 和 前 景色 ; 

口 button 和 input 的 每 一 种 状态 〈 悬浮、 活跃 、 
颜色 ; 





每 个 文档 页 面 都 有 可 覆盖 的 变量 列表 。 


选中 ) 都 有 对 应 


1.6 3 | 5 


1.5 ”模块 化 


由 于 Bulma 被 划分 成 了 多 个 模块 文件 ,所 以 按 需 导入 相应 代码 即 可 。 


例如 ， 有 的 开发 人 员 只 想 使 用 Bulma 的 栅 格 系统 ， 那 么 创建 一 个 如 
下 所 示 的 SASS 文件 即 可 。 


@import "bulma/sass/utilities/_all" 
@import "bulma/sass/grid/columns" 


ER SASS 文件 只 引入 了 Bulma 的 columns 和 column CSS 类 。 


1.6 列 


Flexbox 是 一 维 的 栅 格 系统 ， 这 意味 着 在 Bulma 中 有 行 或 者 列 的 概 
Qo WH Buma 开发 网 站 要 考虑 列 ， 并 将 列 封装 在 行 或 容器 中 。Bulma 
的 基本 功能 如 下 。 


从 columns 行 开始 。 


<div class="columns"> 

</div> 

在 columns 行 中 ， 可 以 添加 一 列 或 者 多 列 ，Bulma 会 基于 添加 的 列 
计算 每 列 所 占 空间 。 


<div class="columns"> 
<div class="column"> 


</div> 
</div> 


在 这 个 例子 中 ， 添 加 的 column 占据 了 整个 浏览 器 的 宽度 ， 因 为 
columns 中 仅 此 一 列 。 


Rt 
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<div class="columns"> 
<div class="column"> 


</div> 
<div class="column"> 


</div> 
</div> 


如 前 所 述 ， 每 一 列 的 宽度 并 不 固定 ， 但 还 是 要 再 次 强调 : 添加 的 列 
越 多 ， 每 一 列 就 会 越 窗 ， 比 如 有 3 列 ， 每 一 列 的 宽度 就 是 33%; 如 果 是 4 
列 ， 每 一 列 的 宽度 就 是 25%。 








1.7 ”修饰 符 


修饰 符 是 额外 的 CSS 类 ， 可 以 把 它们 添加 到 HTML 中 ， 以 此 改变 
HTML 元 素 的 显示 效果 。 以 按钮 ( <button> ) 为 例 ， 通 过 给 它 添加 修饰 
符 来 更 改 显示 效果 ， 如 下 所 示 。 


<button class="button">I'm a button</button> 

该 按钮 只 是 一 个 简单 的 通用 按钮 ， 下 面 把 它 变 成 Bulma 内 置 的 青绿 
色 按 钮 样式 。 为 了 把 它 的 颜色 改 为 主 色 调 ， 可 以 给 它 添加 is-primary 修 
饰 符 。 

<button class="button is-primary">I'm a button</button> 

现在 按钮 变 成 青绿 色 了 ! 再 给 它 添加 一 个 “幽灵 ”按钮 的 修饰 符 ， 
LEE BORA ACR 

<button class="button is-primary is-outlined">I'm a button</button> 

也 可 以 添加 一 个 is-Loading 修饰 符 来 给 按钮 增加 一 个 加 载 中 的 动画 
效果 ， 表 示 某 种 进行 中 的 状态 ， 比 如 表单 提交 流程 。 


18 组 件 | 7 
ULAR: Bulma 中 的 修饰 符 命名 都 以 is- 或 者 has- 开 头 。 


同样 值得 注意 的 是 ， 在 添加 自 定 义 类 之 前 ， 尽 量 利用 Bulma 现 有 的 
类 是 最 佳 实践 。 如 果 有 覆盖 了 某 些 元 素 的 样式 ， 请 继续 使 用 现 有 的 类 。 


1.8 组 件 


Bulma 提供 了 许多 可 用 的 组 件 。 组 件 是 用 于 实现 特定 功能 模块 的 代 
码 片段 。 如 果 基 于 这 些 组 件 来 实现 功能 ， 必 须 按照 组 件 的 对 外 接口 格式 
编写 代码 。 


有 关 组 件 的 更 多 信息 和 示例 ， 请 参见 Bulma 的 组 件 文档 。 


如 下 是 一 个 卡片 组 件 的 示例 : 


<div class="card"> 
<header class="card-header"> 
<!-- 页 眉 内 容 --> 
</header> 


<div class="card-content"> 
<div class="card-image"> 
<!-- 卡片 图 片 --> 
</div> 
</div> 


<footer class="card-footer"> 
<!-- RAS --> 
</footer> 
</div> 


Bulma 还 提供 了 其 他 组 件 ， 比 如 菜单 、 下 拉 菜 单 、 消 息 提示 、 模 态 
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1.9 辅助 类 








辅助 类 ( 也 称 工 具 类 ) 是 用 于 辅助 布局 的 修饰 符 。 它 们 与 传统 修饰 
符 的 区 别 是 ， 修 饰 符 是 用 于 改变 组 件 或 者 元 素 的 视觉 效果 的 ， 而 辅助 类 
是 用 于 处 理 元 素 定位 的 。 


下 面 是 一 些 常 用 的 辅助 类 。 


D is-marginless: 移 除 当前 元 素 的 所 有 外 边 距 。 
D is-unselectable: 使 当前 文本 处 于 不 可 选择 状态 。 
Ois-pulled-left: 使 得 当前 的 元 素 靠 左 布局 。 





除 上 述 辅助 类 外 ， 还 有 用 于 响应 式 和 排版 的 辅助 类 ， 可 帮助 用 户 更 
好 地 实现 响应 式 和 文字 排版 。 





1.10 小结 


除 本 书 外 ， 还 可 以 通过 如 下 资源 了 解 Bulma。 


口 Bulma 官方 文档 
口 Bulma 博客 


ü Bulma expo 





第 2 章 将 介绍 如 何 基 于 Bulma 创建 和 控制 表单 。 


第 2 章 


Bulma 表单 开发 


本 章 介 绍 如 何 使 用 Bulma 创建 用 户 界面 。 我 们 将 创建 一 个 全 屏 的 登 
录 表 单 页 面 ， 以 此 讲解 Bulma 以 及 使 用 Bulma 所 需要 的 工具 。 本 章 介绍 
如 何 使 用 Bulma 开发 表单 ， 以 及 使 用 Bulma 的 原因 和 场景 。 


本 章 要 创建 的 是 包含 邮箱 输入 框 和 密码 输入 框 的 登录 表单 ， 垂 直 和 
水 平 居中 展示 。 


随 书 代码 包含 完整 示例 。 


2.1 模板 要 求 


正如 下 面 的 HTML 标签 一 样 ,为 了 让 登录 页 面 正常 工作 ,编写 页 面 
时 必须 遵循 HTML5 标准 。 


<!DOCTYPE html> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/ 
4.7.0/css/font-awesome.min.css"> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/buLma/ 
0.6.1/css/bulma.min.css"> 
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一 个 完整 的 HTMLS5 页 面 模板 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<title>Login</title> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font- 
awesome/4.7.0/css/font-awesome.min.css"> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ 
bulma/0.6.1/css/bulma.min.css"> 


</head> 
<body> 
<!-- 在 此 处 编写 页 面 内 容 代码 --> 
</body> 
</html> 





这 样 就 得 到 了 一 个 有 效 的 页 面 ， 但 它 还 没有 内 容 ， 下 面 添加 内 容 。 





Bulma 提供 了 hero 类 来 实现 Banner 效 果 , 用 于 展示 重要 内 容 。 在 我 
们 的 例子 中 , 登录 表单 将 放置 在 这 样 的 Banner o hero 还 可 以 和 其 他 修 
饰 符 搭配 使 用 ， 生 成 不 同 主题 的 效果 。 


在 <body> 标 签 中 添加 如 下 代码 片段 : 


<section class="hero is-primary is-fullheight"> 
<div class="hero-body"> 
Login 
</div> 
</section> 


KR hero 类 外 ,还 利用 了 两 个 修饰 符 : is-primary 和 is-fullheight. 
is-primary 添加 默认 的 主 色调 ( 青绿 色 )，is-fullheight 将 hero 的 高 度 
设置 为 浏览 器 高 度 的 100%。 


现在 整个 浏览 器 窗口 是 青绿 色 的 ， 在 左 侧 垂直 居中 的 位 置 有 一 个 白 
色 的 “Login” 文 本 ， 见 图 2-1。 
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图 2-1 


提示 : 如 果 没 有 显示 青绿 色 的 页 面 ， 请 确保 已 经 引入 了 所 有 类 
型 的 资源 ， 并 处 于 联网 状态 。 


22 ”居中 布局 


在 实现 登录 框 之 前 , 首先 设置 布局 : 将 登录 框 设 置 为 水 平和 垂直 居中 。 


O container: 确保 容器 具有 最 大 宽度 , 在 更 宽 的 视 口 中 不 会 到 达 页 
面 边缘 。 

O columns: 列 的 父 级 容器 。 

O colum: 水 平 居中 的 列 。 

O box: 具有 白色 背景 和 阴影 , 使 得 在 这 个 青绿 色 的 网 页 上 便于 阅读 
内 容 。 

<section class="hero is-primary is-fullheight"> 


<div class="hero-body"> 
<div class="container"> 
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<div class="columns is-centered"> 
<div class="column"> 
<form class="box"> 
Login 
</form> 
</div> 
</div> 
</div> 
</div> 
</section> 


尽管 其 中 使 用 了 is-centered 修饰 符 , 但 是 内 容 区 域 看 起 来 并 没有 
水 平 居中 ， 这 是 因为 Bulma 的 列 会 自动 调整 大 小 以 铺 满 整 个 水 平 空间 ， 
这 里 只 有 一 列 ， 所 以 这 一 列 会 占据 100% 的 宽度 。 


提示 : 尝试 添加 第 2 列 并 观察 它们 是 否 各 占据 $0% 的 水 平 空 间 。 


由 于 不 希望 登录 框 太 宽 ， 因 此 需要 调整 此 列 的 大 小 。 





调整 列 的 大 小 


这 里 只 需要 一 列 ， 并 且 希 望 它 是 居中 和 响应 式 的 。Bulma 提供 了 用 
于 居中 列 的 修饰 符 ， 并 能 为 每 个 断 点 指定 不 同 的 列 大 小 。 


要 实现 这 一 点 ， 请 在 表单 容器 中 添加 下 面 的 修饰 符 ， 每 一 个 都 有 特 
EEH. 


O is-5-tablet: 在 平板 设备 (窗口 宽度 大 于 769 像素 ) 上 ， 限 制 列 
占 5/12 的 宽度 。 

O is-4-desktop: 在 桌面 设备 (窗口 宽度 大 于 1024 像素 ) 上 ， 限 制 
列 占 4/12 的 宽度 。 

O is-3-widescreen: 在 宽屏 显示 器 (窗口 宽度 大 于 1216 像素 ) E, 
限制 列 占 3/12 的 宽度 。 
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由 于 Bulma 的 设计 优先 考虑 移动 设备 ， 因 此 无 须 向 表单 容器 添加 手 
机 端 修饰 符 。 默 认 情况 下 ， 在 移动 设备 上 为 全 宽 。 


给 column 添加 上 面 几 种 设备 的 修饰 符 ， 效 果 如 图 2-2 所 示 。 


<div class="column is-5-tablet is-4-desktop is-3-widescreen"> 
<form class="box"> 
Login 
</form> 
</div> 








图 2-2 


做 完 上 述 改动 后 ， 调 整 浏览 器 窗口 大 小 即 可 看 到 列 会 根据 设置 的 断 
点 大 小 自动 调整 宽度 。 


接 下 来 实现 表单 内 容 部 分 。 


23 ”实现 表单 内 容 


登录 表单 包括 4 部分: 
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口 邮箱 输入 框 ; 

口 密码 输入 框 ; 

口 “Remember me” ( 是 否 记 住 ) 复 选 框 ; 
口 提交 按钮 。 





下 面向 其 中 一 些 控 件 添加 占 位 符 和 必需 ( required ) 属性 ， 并 处 理 
表单 错误 ， 以 便 向 用 户 提示 未 能 登录 的 原因 。 


2.3.1 logo 
为 了 确保 用 户 登 录 了 正确 的 网 站 ， 首 先 添加 一 个 logo， 用 以 替换 文 
本 “Login”， 如 图 2-3 所 示 。 
<form class="box"> 
<div class="field has-text-centered"> 
<img src="images/logo-bis.png" width="167"> 


</div> 
</form> 


BLEEDING EDGE PRESS 


2-3 
请 确保 images 目录 和 login. html 相 邻 ， 如 图 2-4 所 示 。 
images login.html 


2-4 
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Bulma 提供 了 field 类 来 均匀 分 隔 表单 区 域 ， 以 及 一 组 类 似 于 has- 


text-centered ( 给 元 素 添加 居中 和 行内 效果 ) 的 辅助 类 来 排 布 表单 元 素 。 


2.3.2 ”邮箱 输入 框 


使 用 Bulma 的 如 下 两 个 类 来 实现 输入 框 。 

O label: 专 为 标签 设计 的 类 , 它 会 给 标签 元 素 添 加 加 粗 效果 和 设置 
底部 间距 。 

口 control: 相当 于 表单 输入 容器 , 利用 它 可 以 给 表单 元 素 添加 图 标 。 





首先 编写 如 下 代码 : 


<div class="field"> 
<label class="Label">Email</label> 
<div class="control"> 
<input class="input" type="emaiLl" placeholder="e.g. alexjohn- 
son@gmail.com"> 
</div> 
</div> 


预览 效果 如 图 2-5 所 示 。 


BLEEDING EDGE PRESS 


Email 





2-5 
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其 中 使 用 了 HTMLS 的 邮箱 输入 框 ， 也 可 以 使 用 Font Awesome 的 邮 
箱 图 标 来 修饰 ， 以 增强 该 输入 框 的 语义 。 


在 使 用 Bulma 之 前 ， 首 先 需 要 给 control 元 素 添加 has-icons-left 
修饰 符 ， 该 修饰 符 会 让 control 元 素 左 边 留 出 一 定 空间 来 放置 图 标 。 


<div class="control has-icons-left"> 


因为 是 邮箱 输入 框 ， 所 以 选择 一 个 信封 的 图 标 ， 同 时 添加 修饰 符 使 
得 图 标 居 左 并 适 配 control 元 素 左 边 留 出 的 空间 。 


<span class="icon is-small is-left"> 
<i class="fa fa-envelope"></i> 
</span> 


D icon: Bulma 定义 的 图 标 类 。 

D is-small: 以 小 尺寸 显示 图 标的 修饰 符 。 也 可 以 使 用 is-Large 修 
饰 符 来 以 大 尺寸 显示 。 

O is-left: 居 左 排列 。 





现在 control 元 素 包含 了 一 个 左边 带 图 标的 输入 框 ， 如 图 2-6 所 示 。 


<div class="control has-icons-left"> 
<input class="input" type="email" placeholder="e.g. alex@smith.com" re- 
quired> 
<span class="icon is-small is-left"> 
<i class="fa fa-envelope"></i> 
</span> 
</div> 





Email 
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说 明 : 即使 在 页 面 加 载 后 加 载 图 标 ， 布 局 也 不 会 出 现 塌陷 ， 
Bulma 确保 了 图 标 所 占 空 间 是 固定 的 ， 即 使 图 标 未 加 载 完成 。 


2.3.3 ”密码 输入 框 


密码 输入 框 和 邮箱 输入 框 非常 类 似 , 因此 可 以 复制 邮箱 部 分 的 代码 ， 
稍 做 改动 ， 效 果 如 图 2-7 所 示 。 





O label 部 分 改 成 “Password o 
口 输入 框 的 类 型 改 为 password。 
O 输入 框 占 位 符 设置 为 x*****。 
O 图 标 改 为 fa-lock 类 型 。 





<div class="field"> 
<label class="label">Password</label> 
<div class="control has-icons-left"> 
<input class="input" type="password" placeholder="********" required> 
<span class="icon is-small is-left"> 
<i class="fa fa-lock"></i> 
</span> 
</div> 
</div> 





Password 
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邮箱 输入 框 和 密码 输入 框 采 用 同样 的 类 ， 因 此 显示 效果 相同 。 


2.3.4 ZHE 


添加 “Remember me” 复 选 框 。<label> 标 签 可 以 增 大 点 击 区 域 , 使 
得 “Remember me” 文 本 同样 可 点 击 。 


因为 不 需要 使 用 图 标 ， 所 以 这 里 无 须 使 用 control 辅助 类 ， 效果 如 
2-8 所 示 。 





18 | #28 Bulma 表单 开发 


<div class="field"> 
<label class="checkbox"> 
<input type="checkbox"> 
Remember me 
</label> 
</div> 











Remember me 


2-8 





2.3.5 “登录 按钮 


为 了 完成 表单 ， 还 需要 一 个 提交 按钮 。Bulma 提供 了 button 类 来 实 
现 按钮 效果 ， 可 在 如 下 元 素 中 使 用 : 


O 锚 标 签 <a>; 
口 按钮 标签 <button>; 
口 输入 标签 <input type="submit">。 





推荐 使 用 <button> 标 签 ， 因 为 它 是 灵活 有 效 的 表单 元 素 ， 效 果 如 
2-9 所 示 。 


<div class="field"> 
<button class="button is-success"> 


Login 
</button> 
</div> 
| Login | 
2-9 
2.4 小 结 


至 此 ， 登 录 页 面 就 完成 了 。 因 为 在 邮箱 和 密码 输入 框 中 使 用 了 
required 属性 ， 所 以 只 有 有 效 的 内 容 才 能 提交 成 功 ， 如 图 2-10 所 示 。 
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Remember me 


gir 





图 2-10 


接 下 来 考虑 用 户 登 录 后 跳 转 到 的 模块 : 管理 页 面 。 
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Ud SAAN MURS 


第 2 章 通 过 一 个 登录 页 面 实例 介绍 了 如 何 使 用 Bulma 创建 并 控制 
HTML 表单 ， 本 章 开 始 编写 管理 页 面 。 


本 章 将 深入 介绍 如 何 使 用 Bulma 的 导航 和 菜单 组 件 。 创 建 网 站 时 这 
些 组 件 (尤其 是 导航 ) 是 必 不 可 少 的 ， 所 以 不 必 每 次 都 重复 造 轮子 ， 诉 
Wi Bulma 即 可 。 值 得 注意 的 是 ， 可 以 通过 更 改 Bulma 变量 来 适 配 所 需 的 
设计 风格 。 








本 章 的 例子 假设 用 户 可 以 正确 登录 ， 登 录 成 功 后 ， 站 点 的 管理 页 面 
将 展示 给 用 户 。 管 理 页 面 的 基本 结构 包括 : 


ü Dashboard 
QO) Books 

m Book 

ü Customers 
m Customer 


0 Orders 
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m Order 


每 一 页 都 有 自己 的 特定 内 容 ， 也 有 一 些 功能 是 通过 模版 共享 的 ， 比 
如 导航 栏 、 侧 边栏 和 主 区 域 。 


首先 需要 实现 Books 模版 ,复制 之 前 的 login.html 文件 ， 重 命名 为 
books.html ， 并 将 <body> 标 签 中 的 元 素 全 部 删除 ， 只 保留 <Doctype>、 


<htmL> 和 <head> 标 签 。 


3.1 创建 导航 栏 
Bulma 提供 了 灵活 的 响应 式 导航 组 件 ， 可 用 于 展示 如 下 内 容 : 


O 公司 logo， 也 是 可 跳 转 到 首页 的 超 链 接 ; 

口 导航 的 移动 端 图 标 ; 

口 品牌 理念 ; 

口 用 户 名 ; 

口 下 拉 菜 单 ， 包 含 用 户 信 息 、 报 告 问题 的 按钮 和 退出 登录 的 按钮 。 











<nav class="navbar has-shadow"> 
<div class="navbar-brand"> 
<!-- Logo、 品 牌 理念 和 navbar-burger --> 
</div> 
<div class="navbar-menu"> 
<!-- 用 户 名 、 下 拉 菜 单 --> 
</div> 
</nav> 


3.1.1 导航 品牌 标志 


导航 栏 会 展示 公司 logo。 借 助 Bulma 提供 的 修饰 符 类 ， 可 以 确保 
logo 在 所 有 终端 设备 上 恰当 展现 ， 而 不 用 编写 额外 的 样式 代码 。 
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导航 logo 在 导航 栏 的 左 侧 。 它 总 是 可 见 的 ， 可 以 包含 导航 子 元 素 ， 
也 具有 navbar-burger 类 ， 可 用 于 控制 导航 菜单 的 显示 或 隐藏 。 


添加 公司 logo 和 品牌 理念 ， 如 图 3-1 所 示 。 


<div class="navbar-brand"> 
<a class="navbar-item"> 
<img src="images/logo.png"> 
</a> 
</div> 





Wf BLEEDING EDGE PRESS 
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这 里 无 须 指 定 logo 图 片 的 大 小 ， 因 为 Buma 会 控制 navbar-brand 
下 图 片 大 小 自 适应 


现在 导航 栏 还 没有 什么 有 用 的 功能 ， 因 为 还 未 添加 导航 链接 。 下 面 
创建 3 个 <span> 标 签 ， 每 个 标签 将 作为 汉堡 图 标的 一 行 。 现 在 点 击 汉 堡 
图 标 , 还 没有 任何 交互 功能 。 可 以 使 用 navbar-burger 组 件 类 来 实现 汉 倚 
图 标 。 


接 下 来 添加 navbar-burger 类 ，navbar-burger 图 标 仅 在 终端 设备 宽 
度 小 于 1024 像素 的 情况 下 显示 ， 如 图 3-2 所 示 。 





<div class="navbar-brand"> 
<a class="navbar-item"> 
<img src="images/logo.png"> 
</a> 
<div class="navbar-burger"> 
<span></span> 
<span></span> 
<span></span> 
</div> 
</div> 








Wf BLEEDING EDGE PRESS 
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这 样 就 完成 了 导航 栏 左 侧 的 功能 ， 接 下 来 编写 右 侧 的 功能 。 


3.1.2 ”导航 菜单 


Bulma 的 navbar-menu 类 包含 剩余 所 有 导航 元 素 ， 当 点 击 navbar- 
burger 展开 的 时 候 , 就 会 显示 这 部 分 内 容 。navbar-menu 内 容 是 默认 隐藏 
的 ， 可 以 通过 添加 is-active 来 更 改 默认 显示 状态 。 





在 桌面 设备 上 , navbar-menu 的 内 容 始终 显示 , 并 且 会 自 适应 导航 栏 
剩余 空间 。 


导航 菜单 拆 分 成 两 部 分 。 


口 navbar-start: 左 侧 部 分 ， 紧 挨 着 navbar-brand。 
口 navbar-end: 右 侧 部 分 。 





左 侧 部 分 比较 适合 展示 品牌 理念 ,添加 在 navbar-brand 之 后 的 位 置 ， 
如 图 3-3 所 示 。 


<div class="navbar-menu"> 
<div class="navbar-start"> 
<div class="navbar-item"> 
<small>Publishing at the speed of technology</small> 
</div> 
</div> 
</div> 











Publishing at the speed of technology 





3-3 
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如 果 调 整 浏 览 器 窗口 大 小 , 就 会 发 现在 窗口 大 于 1024 像素 时 品牌 理 
念 部 分 才 会 显示 。 


3.1.3 ”下拉 菜 单 
在 导航 元 素 nav-start 后 面 添加 nav-end 元 素 创建 下 拉 菜 单 : 


<div class="navbar-end"> 


</div> 


navbar-end 元 素 包 含 可 点 击 的 导航 链接 。 当 鼠标 指针 移动 到 用 户 名 
上 时 下 拉 菜 单 会 展开 ， 显 示 用 户 Alex Johnson 的 信息 。 


既然 “Alex Johnson” 是 导航 中 的 链接 ， 因 此 可 以 使 用 Bulma 的 
narbar-item 类 来 适 配 导 航 中 的 链接 样式 , 该 类 同样 适用 于 下 拉 荣 单 中 的 
导航 链接 。 可 以 通过 has-dropdown 修饰 符 来 隐藏 下 拉 菜 单 ， 除 非 鼠 标 指 
PAPER AS E, WE 3-4 所 示 。 


<div class="navbar-end"> 
<div class="navbar-item has-dropdown"> 
<div class="navbar-link"> 
Alex Johnson 
</div> 
<div class="navbar-dropdown"> 
Dropdown content 
</div> 
</div> 
</div> 








Alex Johnson ~ 
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O has-dropdown: 给 navbar -item 添加 该 类 会 隐藏 其 内 部 的 下 拉 菜 单 。 
O navbar-link: 该 导航 链接 元 素 总 是 可 见 的 ， 并 会 触发 下 拉 菜 单 。 
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口 navbar -dropdown: 下 拉 菜 单 容 器 。 


navbar -dropdown 元 素 上 默认 是 隐藏 的 , 可 以 通过 鼠标 或 是 CSS 类 来 控 
制 是 否 显示 ， 用 鼠标 指针 悬浮 控制 状态 更 为 简单 ， 给 navbar-item 添加 
is-hoverable 类 即 可 实现 。 


<div class="navbar-item has-dropdown is-hoverable"> 


鼠标 指针 悬浮 到 Alex Johnson 菜单 项 上 ， 便 会 展开 下 拉 菜 单 ， 如 
3-5 所 示 。 





Alex Johnson ~ 


Dropdown content 











3-5 


在 navbar -dropdown 元 素 下 也 可 以 添加 navbar-item 元 素 , 下 面 增加 
3 个 带 图 标的 导航 子 项 。 


将 之 前 代码 的 “Dropdown content” 内 容 改 为 如 下 代码 ， 效 果 如 图 3-6 
所 示 。 


<div class="navbar-dropdown"> 
<a class="navbar-item"> 
<div> 
<span class="icon is-small"> 
<i class="fa fa-user-circle-o"></i> 
</span> 
Profile 
</div> 
</a> 
<a class="navbar-item"> 
<div> 
<span class="icon is-small"> 
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<i class="fa fa-bug"></i> 
</span> 
Report bug 
</div> 
</a> 
<a class="navbar-item"> 
<div> 
<span class="icon is-small"> 
<i class="fa fa-sign-out"></i> 
</span> 
Sign Out 
</div> 
</a> 
</div> 





Alex Johnson ~ 


® Profile 
Š Report bug 


@ Sign Out 











图 3-6 





这 样 就 编写 好 了 管理 页 面 的 啊 应 式 导 航 栏 ， 如 图 3-7 所 示 。 








A zceepwec EDGE PRESS 








图 3-7 


3.2 页面 主 区 域 


所 有 管理 页 面 都 会 采用 两 列 布局 ， 左 边 展 示 所 有 页 面 共用 的 侧 边栏 
菜单 ， 右 边 是 当前 页 面 的 内 容 区 域 。 


在 导航 栏 之 后 添加 Bulma 的 section 标签 作为 主 内 容 区 域 的 容器 。 
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<section class="section"> 
<!-- 页 面 主 内 容 --> 
</section> 


这 就 为 页 面 的 主要 内 容 提 供 了 一 些 空间 ， 防 止 它 到 达 视 口 边缘 。 下 
面 定义 两 列 布局 。 


在 section 中 添加 如 下 内 容 : 


<div class="columns"> 
<div class="column is-4-tablet is-3-desktop is-2-widescreen"> 
!-- 侧 边栏 --> 
</div> 
Si class="coLumn"> 
- 右 侧 部 分 ， 特 定 于 每 --> 
dite 
</div> 


和 登录 页 面 一 样 ， 这 里 第 一 列 的 内 容 根 据 窗 口 大 小 自动 调整 宽度 ， 
因为 Bulma 做 了 响应 式 处 理 ， 所 以 其 余 列 会 自动 适 配 剩余 空间 大 小 。 接 
下 来 在 左 侧 区 域 添加 侧 边 栏 。 





3.3” 侧 边栏 菜单 

菜单 组 件 和 导航 栏 组 件 的 用 法 非常 类 似 ， 包含 menu 容器 、menu- list 
(菜单 子 项 ) 等 。 

Bulma 的 菜单 组 件 可 用 于 编写 任何 类 型 的 垂直 导航 。 下 面 编写 包含 
Dashboard, Books, Customers 和 Orders 的 导航 。 

在 左 侧 区 域 的 第 一 列 中 添加 菜单 元 素 ， 创 建 一 个 <nav> 标 签 并 添加 
menu 类 。 


<nav class="menu"> 


</nav> 
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可 以 给 菜单 添加 标签 等 内 容 ，menu-label 类 可 将 任何 HTML 元 素 变 
成 菜单 的 标签 ， 不 过 该 类 多 用 于 标题 和 段落 标签 。 


继续 创建 侧 边栏 菜单 : 


<nav class="menu"> 
<p class="menu-label"> 
Menu 
</p> 
</nav> 


还 需要 一 个 菜单 列表 。 该 列表 将 包含 Dashborad 、Books 、Customers 
和 Orders 页 面 等 有 用 的 链接 。 菜 单列 表 应 该 是 带 有 列表 项 的 无 序列 表 ， 
这 与 为 Web 站 点 创建 标准 的 导航 栏 并 无 差别 。 


<ul class="menu-list"> 
<li> 
<a href="dashboard.html"> 
<span class="icon"> 
<i class="fa fa-tachometer"></i> 
</span> 
Dashboard 
</a> 
</li> 
<li> 
<a class="is-active" href="books.html"> 
<span class="icon"> 
<i class="fa fa-book"></i> 
</span> 
Books 
</a> 
</li> 
<li> 
<a href="customers.html"> 
<span class="icon"> 
<i class="fa fa-address-book"></i> 
</span> 
Customers 
</a> 
</li> 
<li> 
<a href="orders.html"> 


<span class="icon"> 
<i class="fa fa-file-text-o"></i> 
</span> 
Orders 
</a> 
</li> 
</ul> 


最 终 代码 如 下 : 


<nav class="menu"> 
<p class="menu-label"> 
Menu 
</p> 
<ul class="menu-list"> 
<li> 
<a href="dashboard.html"> 
<span class="icon"> 
<i class="fa fa-tachometer"></i> 
</span> 
Dashboard 
</a> 
</li> 
<li> 
<a class="is-active" href="books.html"> 
<span class="icon"> 
<i class="fa fa-book"></i> 
</span> 
Books 
</a> 
</li> 
<li> 
<a href="customers.html"> 
<span class="icon"> 
<i class="fa fa-address-book"></i> 
</span> 
Customers 
</a> 
</li> 
<li> 
<a href="orders.html"> 
<span class="icon"> 
<i class="fa fa-file-text-o"></i> 
</span> 
Orders 





3.3 MAŽE 


29 


30 | 第 3 章 站 点 导航 和 侧 边栏 菜单 


</a> 
</li> 
</ul> 
</nav> 


这 段 代码 会 实现 一 个 垂直 菜单 来 填充 页 面 左 列 ， 该 菜单 将 占 页 面 宽 
度 的 约 1/4， 见 图 3-8。 





MENU 


@ Dashboard 


B Customers 








f=) Orders 





图 3-8 


如 图 3-8 aie ies Books 页 面 ， 记 得 给 Books 菜单 项 添 


加 is-active 修饰 符 类 ， 使 其 处 于 选中 状态 。 
3.4 小 结 
以 上 代码 可 作为 模版 ， 导航 栏 和 侧 边栏 菜单 两 部 分 。 接 下 来 开 


发 Books 页 面 内 容 。 


第 4 章 


实现 响应 式 栅 格 


本 章 将 介绍 如 何 使 用 Buma 创建 响应 式 栅 格 ， 以 及 box, list, 
media 和 pagination 等 Bulma 组 件 的 用 法 ， 这 些 组件 对 于 开发 大 型 网 站 
非常 有 用 。 

前 面 已 经 实现 了 页 面 左 列 的 功能 ， 接 下 来 在 右 侧 主 内 容 区 域 添 加 响 
应 式 栅 格 。Books Customers 和 Orders 页 面 的 编写 方式 与 之 类 似 。 我 们 
会 遵循 CRUD 模式 来 创建 页 面 ， 每 个 页 面 将 会 包含 如 下 UI 组 件 : 


口 一 个 展示 内 容 的 列表 ; 


口 一 个 空 表单 ; 
口 用 于 更 新 列表 内 容 的 表单 ; 





O 一 个 删除 列表 项 的 按钮 。 
将 要 实现 的 books.html 页 面 右 侧 将 会 包含 如 下 内 容 : 


口 标题 ; 
口 水 平 工 具 栏 ; 
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口 图 书 列表 ; 
口 列表 分 页 。 





4.1 工具 栏 


在 布局 的 第 2 列 中 创建 主体 内 容 ， 添 加 <h1> 标 签 并 加 上 is-title 类 ， 
该 类 会 使 得 <h1> 标 签 的 文本 加 粗 ， 字 号 增 大 ， 以 突出 显示 。 


水 平 工 具 栏 可 以 为 用 户 提 供 更 多 操作 , 为 了 让 组 件 在 同一 行 中 泻 染 ， 
可 以 使 用 Level 组 件 。 


4.1.1 level 组 件 和 navbar 组 件 的 相似 性 


level 组 件 和 navbar 组 件 非常 类 似 ， 但 如 果 不 是 实现 导航 栏 ， 应 尽 
量 避 免 使 用 navbar 组 件 。 


level 组 件 的 结构 如 下 : 


<nav class="LeveL"> 
<div class="Level-left"> 
<div class="Level-item"> 
</div> 
</div> 
<div class="Level-left"> 
<div class="Level-item"> 
</div> 
</div> 
</div><!-- level --> 


4.1.2 创建 工具 栏 


介绍 过 了 level 组 件 和 navbar 组 件 ， 但 是 还 有 儿 个 修饰 符 类 没有 























O subtitle: 次 级 标题 ， 与 title 类 对 应 。 

O is-5: 标题 修饰 符 类 ， 产 生 类 似 于 <h5> 的 标题 效果 。 

O is-success: 代表 成 功 状态 ， 默 认 设 置 绿色 的 效果 。 

口 is-hidden-tablet-only: 在 平板 设备 上 隐藏 元 素 。 

O select: IH control 在 输入 框 的 使 用 , 把 select 类 用 于 <select> 
标签 效果 相近 。 





最 终 的 工具 栏 代码 如 下 所 示 : 
<h1 class="title">Books</h1> 


<nav class="LeveL"> 
<div class="Level-left"> 
<div class="Level-item"> 
<p class="subtitle is-5"> 
<strong>6</strong> books 
</p> 
</div> 


<p class="Level-item"> 
<a class="button is-success" href="new-book.html">New</a> 


</p> 


<div class="Level-item is-hidden-tablet-only"> 
<div class="field has-addons"> 
<p class="control"> 
<input class="input" type="text" placeholder="Book name, ISBN..."> 
</p> 
<p class="control"> 
<button class="button"> 
Search 
</button> 
</p> 
</div> 
</div> 
</div> 


<div class="Level-right"> 
<div class="Level-item"> 
Order by 
</div> 
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<div class="Level-item"> 
<div class="select"> 
<select> 
<option>Publish date</option> 
<option>Price</option> 
<option>Page count</option> 
</select> 
</div> 
</div> 
</div> 
</nav> 


以 上 代码 添加 了 标题 “Books” 和 包含 如 下 功能 的 水 平 工具 栏 ， 见 
4-1。 


口 图 书 计数 。 

O “New” 按 钮 ， 点 击 会 跳 转 到 一 个 新 建 图 书页 面 。 
口 搜索 框 。 

O 排序 下 拉 框 。 








Books 


6 books | New | Search Order by Publish date 











图 4-1 
说 明 : 为 了 避免 工具 栏 发 生 内 容 溢出 ， 在 平板 设备 上 会 隐藏 搜 
RHE, 多亏 了 level 类 ， 所 有 元 素 都 是 重 直 对 齐 且 均匀 间隔 的 。 


4.2 RAEM 


要 显示 出 版 商 出 售 的 所 有 图 书 ， 需 要 定义 一 个 包含 6 个 图 书 条 目的 
二 维 栅 格 。 每 个 机 格 将 包括 : 


口 图 书 封面 ; 
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口 书 名 ; 

口 价格 ; 

口 数据 元 数据 ( 页码、ISBN ; 
D 编辑 和 删除 图 书 的 链接 。 





要 创建 这 6 本 书 的 栅 格 ， 先 要 创建 标准 的 columns 行 ， 并 用 column 
类 为 它 设置 6 个 <div> 子 项 。 首 先 用 一 张 图 片 作为 图 书 的 占 位 符 。 


<div class="columns"> 
<div class="column"> 
<img src="images/tensorflow. jpg 
<div> 
<div class="column"> 
<img src="images/tensorflow. jpg 
<div> 
<div class="column"> 
<img src="images/tensorflow. jpg 
<div> 
<div class="column"> 
<img src="images/tensorflow. jpg 
<div> 
<div class="column"> 
<img src="images/tensorflow. jpg 
<div> 
<div class="column"> 
<img src="images/tensorflow. jpg 
<div> 
</div> 


在 浏览 器 中 刷新 此 books.html 页 面 ， 应 该 看 到 6 本 书 的 封面 均匀 地 
排列 在 一 行 中 ， 然 而 它们 太 小 了 ， 需 要 增 大 尺寸 。 使 用 修饰 符 类 让 列 适 
配 不 同 设备 。 


width="80"> 


width="80"> 


width="80"> 


width="80"> 


width="80"> 


width="80"> 


为 了 优化 空间 ， 列 的 数量 将 根据 视 口 宽度 变化 : 


D 在 手机 和 平板 设备 上 占据 一 列 ; 
O 在 桌面 设备 上 占据 两 列 ; 
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O 在 宽屏 设备 上 占据 三 列 。 


<div class="column is-12-tablet is-6-desktop is-4-widescreen"> 
<img src="images/tensorflow. jpg" width="80"> 
</div> 


如 果 刷 新 浏览 器 窗口 ， 会 发 生 奇怪 的 状况 : 每 本 书 的 封面 都 根据 不 
同 设备 自 适应 大 小 ， 但 是 并 没有 上 自动 换行 ， 这 是 因为 添加 的 修饰 符 类 履 
盖 了 列 的 自 适 应 能 力 ， 好 在 Bulma 提供 了 解决 该 问题 的 类 ， 因 此 不 用 额 
外 编写 自 定 义 样式 代码 。 





这 个 修饰 符 类 就 是 is-multiline。 开 发 人 员 在 开始 使 用 Bulma 时 
党 忘记 这 个 类 。 如 果 直 接 修改 列 宽 并 希望 它们 自动 换行 ， 需 要 使 用 


is-multiline 类 。 


43 图 书 项 


box 类 具有 边框 和 阴影 效果 ， 可 从 视觉 上 区 分 各 项 ， 适 用 于 重复 列 
表 项 。 


<article class="box"> 
<div class="media"> 
<aside class="media-left"> 
<img src="images/tensorflow. jpg" width="80"> 
</aside> 


<div class="media-content"> 

<p class="title is-5 is-spaced is-marginless"> 

<a href="edit-book.html"> 
TensorFlow For Machine Intelligence 

</a> 

</p> 

<p class="subtitle is-marginless"> 
$22.99 

</p> 

<div class="content is-small"> 
270 pages 
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<br> 
ISBN: 9781939902351 
<br> 
<a href="edit-book.html">Edit</a> 
<span>: </span> 
<a>Delete</a> 
</p> 
</div> 
</div> 
</article> 


以 上 代码 片段 包含 了 一 些 未 提 及 的 类 ， 其 中 一 个 类 是 media， 它 是 可 
重复 的 ， 骸 套 着 内 容 ， 比 如 图 书信 息 或 博客 文章 的 评论 ， 如 图 4-2 所 示 。 








O media: 册 套 内 容 的 容器 ， 可 重复 。 

O media-left: 类 似 于 navbar-left, A media 组 件 的 左 侧 部 分 。 
O media-content: media 内 容 容器 。 

O is-marginless: 移 除 外 边 距 。 

O content: 适用 于 任何 文本 内 容 。 








TensorFlow For Machine 
Intelligence 














4-2 
media 组 件 是 一 个 非常 简单 但 很 有 用 的 UI 组 件 ， 它 可 以 把 小 的 媒体 
元 素 ( 比如 图 像 或 图 标 ) 与 较 大 的 内 容 并 排 组 合 在 一 起 。 将 书 的 封面 与 
描述 并 列 放置 ， 在 视觉 上 达到 平衡 并 优化 空间 。 
标题 /副标题 组 合 强调 了 重要 的 图 书信 息 ( 书 名 和 价格 )， 而 content 
类 是 Bulma 用 于 包含 任何 较 长 文本 的 基本 容器 。 
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fem: 为 了 确保 图 片 正常 显示 , 请 按 图 4-3 所 示 的 目录 结构 设置 


图 片 路 径 。 


images login.html 














4-3 





给 其 余 5 本 书 分 别 添加 封面 图 片 ， 如 图 4-4 所 示 。 


0 Docker in Production — docker.jpg 
Q) Developing a Gulp.js Edge — gulp.jpg 
O LearningSwift 一 swift.jpg 


0 Choosing a JavaScript Framework — js-framework.jpg 





O Deconstructing Google Cardboard Apps — google-cardboard.jpg 


T TensorFlow For Machine Docker in Production 
Intelligence $22.99 
156 page 
A 2 ISBN: 9781939902164 
939902351 dit « Delete 


Developing a Gulp.js Edge 
$22.99 


134 page 











Learning Swift 
$22.99 
42 pages 





Choosing a JavaScript 
Framework 
$19.99 


<j Deconstructing Google 
Cardboard Apps 
$22.99 


171 





BN: 9781939902092 














现在 页 面 栅 格 中 已 经 包含 6 本 书 了 ， 调 整 浏览 器 窗口 大 小 ， 就 会 发 
现 栅 格 会 从 一 列 变 成 两 列 、 三 列 。 


44 分 页 








因为 图 书 数目 是 不 固定 的 ， 所 以 很 有 可 能 最 后 超过 6 本 (或 12 本， 
若 想 每 页 展示 12 本 书 )。 对 于 一 页 展示 不 全 的 情况 ， 可 以 使 用 分 页 组 件 
来 显示 任意 多 本 书 。 





在 包含 is-multiline 类 的 元 素 后 面 添加 如 下 代码 ， 效 果 见 图 4-5。 


<nav class="pagination"> 
<a class="pagination-previous">Previous</a> 
<a class="pagination-next">Next page</a> 
<ul class="pagination-list"> 
<li> 
<a class="pagination-link">1</a> 
</li> 
<li> 
<span class="pagination-ellipsis">&hellip; </span> 
</li> 
<li> 
<a class="pagination-link">45</a> 
</li> 
<li> 
<a class="pagination-link is-current">46</a> 
</li> 
<li> 
<a class="pagination-link">47</a> 
</li> 
<li> 
<span class="pagination-ellipsis">&hellip; </span> 
</li> 
<li> 
<a class="pagination-link">86</a> 
</li> 
</ul> 
</nav> 


O pagination: 分 页 组 件 容 器 。 

口 pagination-previous 和 pagination-next: 前 一 页 按钮 和 后 一 页 
按钮 。 

O pagination-link: 页 码 跳 转 链接 。 
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口 pagination-ellipsis: 页 码 过 多 展示 不 全 的 做 省 略 处 理 。 
口 is-current: 高 完 显 示 当 前 页 码 。 











1 45 47 86 Previous Next page 





4-5 
根据 页 码 数 可 以 做 如 下 处 理 ， 效 果 见 图 4-6. 
O 添加 或 移 除 pagination-ellipsis 元 素 。 


口 使 用 disabled 类 来 控制 “Previous” 和 “Next page” 按 钮 是 否 可 
点 击 。 








B Beeepwea Enoe Peess Publishing at the speed of technology Alex Johnson 


Books 


@ Dashboard 


B Customers 







TensorFlow For Machine 
Intelligence 
$22.99 


Docker in Production 
® Orders 










=| Choosing a JavaScript oe wi Deconstructing Google 
Framework ion Cardboard Apps 
$22.99 


$19.99 





1 45 a7 86 Previous | Next page 











45 Ih 


这 样 就 完成 了 图 书 列表 页 面 ， 接 下 来 编写 图 书 详情 页 。 





第 5 章 


创建 面包 导 导 航 和 文件 上 传 功 能 


接 下 来 创建 面包 届 和 字段 。 本 章 在 前 儿童 的 基础 上 ， 创 建 图 书 详 


图 书 详情 页 面包 含 .new-book.html 和 .edit-book.html 两 个 页 面 ， 若 想 
删除 图 书 ， 只 需要 在 图 书 列表 中 添加 一 个 删除 按钮 即 可 。 


复制 books.html 文件 ， 重 命名 为 new-book.html， 并 删除 右边 列 中 的 
title, level, columns is-multiline 和 pagination 等 内 容 ， 只 保留 导 


航 和 侧 边 栏 菜 单 。 


5.1 图 书 详情 页 模板 
图 书 详情 页 模板 将 包括 两 个 部 分 : 


口 面包 悄 导 航 ， 告 诉 用 户 他 们 在 哪里 ， 以 及 如 何 导航 回来 ; 
口 表单 ， 允 许 用 户 输入 图 书信 息 。 
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5.1.1 Hae 

点 击 books.html 的 “New” 按 钮 ， 就 会 跳 转 到 new.html 页 面 ， 因 此 
可 以 把 后 者 看 作 前 者 的 一 个 子 页 面 。 要 想 向 用 户 强 调 该 层次 结构 ， 可 以 
显示 一 个 Bulma MES, WE 5-1 所 示 。 





<nav class="breadcrumb"> 
<ul> 
<li> 
<a href="books.html">Books</a> 
</li> 
<li class="is-active"> 
<a href="new-book.html">New book</a> 
</li> 
</ul> 
</nav> 








Books / New book 
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如 图 5-1 tax, “New book” 代 表 当 前 页 面 ， 不 可 点 击 。 


5.1.2 图书 录入 表单 
图 书 详情 包含 如 下 字段: 


口 标题 ; 
口 价格 ; 
口 页 数 ; 
O ISBN; 
口 封面 。 





类 似 于 登录 页 面 ， 图 书 录入 表单 需要 用 到 <form 标签 和 如 下 Bulma 
元 素 : 
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口 label 
DQ text input 
口 textarea 


QO) file upload 





QO) buttons 


紧 接 着 面包 习 导 航 ， 添 加 第 一 个 录入 项 ， 如 图 5-2 所 示 。 


<form> 
<div class="field"> 
<div class="field"> 
<label class="Label">Title</label> 
<div class="control"> 
<input class="input is-large" type="text" placeholder="e.g. Design- 
ing with Bulma" required> 
</div> 
</div> 
</div> 
</form> 





Title 
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因为 书 名 是 一 本 书 最 重要 的 信息 ， 所 以 使 用 了 一 个 大 的 输入 框 ， 这 
里 可 以 直接 使 用 Bulma 的 is-large 修饰 符 类 。 对 于 该 表单 ,输入 项 须 为 
文本 ， 而 非 数值 。 


接 下 来 是 价格 、 页 码 和 ISBN 的 输入 框 ， 因 为 这 儿 个 输入 项 内 容 比 
较 简短 ， 在 桌面 设备 上 可 以 显示 为 一 行 ， 所 以 在 标题 表单 项 后 输入 编写 
如 下 代码 : 

<div class="columns is-desktop"> 


<div class="column"> 
<label class="Label">Price</lLabel> 
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<div class="control has-icons-left"> 
<input class="input" type="number" placeholder="e.g. 22.99" required> 
<span class="icon is-small is-left"> 
<i class="fa fa-dollar"></i> 
</span> 
</div> 
</div> 


<div class="column"> 
<label class="Label">Pages</label> 
<div class="control"> 
<input class="input" type="number" placeholder="e.g. 270" required> 
</div> 
</div> 


<div class="column"> 
<label class="Label">ISBN</label> 
<div class="controLl"> 
<input class="input" type="text" placeholder="e.g. 9781939902351" re- 
quired> 
</div> 
</div> 
</div> 


使 用 修饰 符 类 is-desktop 来 控制 这 一 行 仅 在 桌面 设备 上 显示 , 而 在 
移动 设备 和 平板 设备 上 隐藏 ， 如 图 5-3 所 示 。 





Price Pages ISBN 
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要 设置 价格 ， 可 以 使 用 has-icons-left 修饰 符 类 并 添加 Font 
Awesome fa-dollar 图 标 。 
对 于 封面 图 片 ，Bulma 提供 了 包含 图 标 、 标 签 和 可 选 文件 名 的 文件 
输入 框 。 在 columns 之 后 添加 另 一 个 表单 项 ， 如 图 5-4 所 示 。 


<div class="field"> 
<label class="Label">Cover image</label> 


<div class="controLl"> 
<div class="file has-name"> 
<label class="file-label"> 
<input class="file-input" type="file"> 
<span class="file-cta"> 
<span class="file-icon"> 
<i class="fa fa-upload"></i> 
</span> 
<span class="file-lLabel"> 
Choose a file... 
</span> 
</span> 
<span class="file-name"> 
No file chosen 
</span> 
</label> 
</div> 
</div> 
</div> 


O field: 用 于 保持 表单 字段 的 间距 一 致 。 
O file: 文件 输入 框 容器 。 


口 file-cta: 上 传 文件 动作 。 
O file-icon: 可 选 的 上 传 图 标 。 
口 file-name: 选择 的 文件 名 。 


5.1 


图 书 详情 页 模板 


O file-label: 该 字段 的 实际 可 交互 、 可 点 击 内 容 。 
O file-input: 原生 文件 输入 框 ， 出 于 样式 美化 的 目的 将 其 隐藏 。 
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Cover image 





+ Choose a file... No file chosen 
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如 果 用 户 选 择 了 本 机 文件 ，file-name 字段 内 容 会 更 新 , 图 5-4 为 未 


选择 状态 。 


最 后 添加 创建 按钮 和 取消 按钮 ， 正 确 填写 图 书信 息 后 可 以 通过 创建 
按钮 创建 一 本 书 , 取消 按钮 用 于 取消 本 次 图 书 创建 , 如 图 5-5 所 示 。 Bulma 
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提供 了 多 种 按钮 ， 可 用 于 不 同 功 能 。 


<div class="field"> 
<div class="buttons"> 
<button class="button is-medium is-success">Create book</button> 
<button class="button is-medium is-light">Cancel</button> 


</div> 
Create book Cancel 


</div> 
5-5 








5.2 编辑 页 面 模板 


图 书 编辑 页 面 与 图 书 创建 页 面 基本 相同 , 仅 有 以 下 区 别 : 


口 面包 居 当 前 导航 为 “Edit book”; 

口 所 有 图 书 表单 内 容 都 已 填写 好 ; 

口 封面 是 预览 图 ; 

口 创建 按钮 变 成 了 “Save changes” 按 钮 。 





基于 此 ， 复 制 new-book.html 页 面 ， 重 命名 为 edit-book.html 页 面 ， 
并 做 如 下 改动 。 


将 面包 居中 的 “New book” BOY “Edit book”, WEI 5-6 所 示 。 


<nav class="breadcrumb"> 
<ul> 
<li> 
<a href="books.html">Books</a> 
</li> 
<li class="is-active"> 
<a href="edit-book.html">Edit book</a> 
</li> 
</ul> 
</nav> 
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Books / Edit book 
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第 1 个 表单 的 value 属性 应 该 是 书 名 ， 如 图 5-7 所 示 。 


<input class="input is-large" type="text" placeholder="e.g. Designing with 
Bulma" value="TensorFlow For Machine Intelligence" required> 





Title 


TensorFlow For Machine Intelligence 
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紧 接 着 的 3 个 输入 框 都 应 该 有 值 ， 所 以 给 每 一 个 输入 框 添加 值 ， 如 
图 5-8 所 示 。 


<input class="input" type="number" placeholder="e.g. 22.99" value="22.99" re- 
quired> 

<input class="input" type="number" placeholder="e.g. 270" value="270" re- 
quired> 

<input class="input" type="text" placeholder="e.g. 9781939902351" val- 
ue="9781939902351" required> 





Price Pages ISBN 


22.99 270 9781939902351 
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因为 封面 图 已 经 上 传 了 ， 所 以 添加 “Cover image” 标 签 和 一 个 
control 类 显示 已 经 上 传 的 封面 图 ， 如 图 5-9 所 示 。 





<div class="field"> 
<label class="Label">Cover image</label> 
<div class="controLl"> 
<img src="images/tensorflow. jpg"> 
</div> 
<div class="controLl"> 
<div class="file has-name"> 


AE AR 


<l-- 村 村 --> 
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FOR MACHINE 
INTELLIGENCE 





£ Choose a file... No file chosen 








图 5-9 


该 UI 可 以 避免 用 户 在 未 上 传 新 封面 图 的 情况 下 删除 旧 封 面 图 ， 如 
图 5-10 所 示 。 





A Breerine EDGE PRESS Publishing at the speed of technology Alex Johnson ~ 


MENU 
Books / Edit book 


@ Dashboard 


Title 


B customers TensorFlow For Machine Intelligence 
& Orders Price Pages ISBN 
22.99 270 9781939902351 
Cover image 


FOR MACHINE 


INTELLIGENCE 





& Choose a file... No file chosen 
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5.3 ”小结 


这 样 就 完成 了 图 书 相 关 页 面 ， 接 下 来 开发 Customers 页 面 。 





第 6 章 


BURA BHU 


一 如 既往 ， 本 章 会 继续 开发 之 前 创建 的 项 目 ， 重 点 介绍 如 何 基于 
Bulma 的 类 创建 表格 。 


在 完成 Book 页 面 的 CRUD 功能 的 开发 后 ， 接 下 来 开发 Customers 
页 面 ， 其 功能 和 Book 页 面 类 似 ， 包 含 客户 的 创建 、 编 辑 、 查 看 和 删除 ， 
仅 有 的 两 处 不 同 是 创建 客户 的 表单 字段 和 客户 列表 的 展示 方式 。 客 户 列 
表 的 展示 将 使 用 表格 组 件 而 不 是 box 组 件 。 


完整 示例 见 随 书 代码 。 


6.1 客户 列表 


复制 books.html 页 面 ， 重 命名 为 customers.html， 然 后 做 如 下 更 改 ， 
效果 见 图 6-1。 


口 对 侧 边栏 的 应 用 Customers 菜单 项 is-active 类 。 
口 将 页 面 标题 由 “Books” 改 为 “Customers”。 
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O 移 除 图 书 项 栅 格 。 














@ gceepwea EpaE PRESS Publishing at the speed of technology Alex Johnson 
Customers 
@ Dashboard 
Search Order by Publish date 
B sooks ebooks ME] y 
B Orders 
6-1 


如 图 6-1 所 示 ， 需 要 继续 修改 该 页 面 。 


6.1.1 更 新 工具 栏 
对 工具 栏 中 组 件 的 文本 做 如 下 更 改 ， 效果 见 图 6-2。 


口 将 “6 books” WI “3 customers” o 
口 将 “New” 按 钮 的 跳 转 链接 改 为 new-customer.html。 
口 将 “Book name, ISBN...” 占 位 符 改 为 “Name, email...” 


3 customers | New | Search 


6-2 























工具 栏 右 侧 内 容 替 换 为 如 下 内 容 ， 效 果 见 图 6-3. 


<div class="Level-right"> 
<p class="Level-item"><strong>All</strong></p> 
<p class="Level-item"><a>With orders</a></p> 
<p class="Level-item"><a>Without orders</a></p> 
</div> 











All With orders Without orders 
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借助 一 个 <strong> 标 签 和 两 个 <a> 标 签 ， 就 得 到 了 一 个 基本 的 toggle 


控件 。 


6.1.2 “实现 客户 表格 


为 了 保证 页 面 简洁 ， 每 位 客户 将 包含 如 下 字段 : 





口 姓名 ; 

口 邮箱 地 址 ; 

O 联系 地 址 ， 包 含 街道 名 称 、 邮 编 、 城 市 和 国家 ( 地 区 ) 信息 ; 
O 客户 订单 。 











因为 不 涉及 图 片 展示 , 所 以 这 里 使 用 Bulma 的 <table> 来 更 好 地 展示 
信息 。 


在 level 和 pagination 间 添 加 如 下 信息 ， 效 果 见 图 6-4。 


<table class="table is-hoverable is-fullwidth"> 
<thead> 
<tr> 
<th class="is-narrow"> 
<input type="checkbox"> 
</th> 
<th>Name</th> 
<th>Email</th> 
<th>Country</th> 
<th>Orders</th> 
<th>Actions</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<th class="is-narrow"> 
<input type="checkbox"> 
</th> 
<th>Name</th> 
<th>Email</th> 
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<th>Country</th> 
<th>0rders</th> 
<th>Actions</th> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
<td> 
<input type="checkbox"> 
</td> 
<td> 
<a href="edit-customer.html"> 
<strong>John Miller</strong> 
</a> 
</td> 
<td><code>johnmiller@gmail.com</code></td> 
<td>United States</td> 
<td> 
<a href="customer-orders.html">2</a> 
</td> 
<td> 
<div class="buttons"> 
<a class="button is-small" href="edit-customer .html">Edit</a> 
<a class="button is-small">Delete</a> 





</div> 
</td> 
</tr> 
</tbody> 

</table> 

Name Email Country Orders Actions 
John Miller johnmiller@gmail.com United States = Edit Delete 
Name Email Country Orders Actions 





图 6-4 


说 明 : 由 于 地 址 可 能 很 长 ， 因 此 对 于 列表 视图 来 说 “国家 (地 

区 )” 已 经 足够 了 。 表 格 中 使 用 了 两 个 修饰 符 类 。 

口 is-hoverable: KAHH Rift Be. 
E? 


O is-fullwidth: 令 表 格 宽度 等 于 窗 
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含 复 选 框 的 单元 格 使 用 is-narrow 修饰 符 类 以 确保 其 尽 可 能 窄 。 
复 选 框 常 在 表格 中 用 于 批量 编辑 功能 。 


在 表格 中 添加 两 行 ， 包含 客户 姓名 、 邮 箱 地 址 、 国 家 (地 区 )、 订单 
数目 数据 ， 如 图 6-5 所 示 。 














Name Email Country Orders Actions 

John Miller johnmiller@gmail .com United States Edit Delet 

Samantha Rogers samrogers@gmail.com United Kingdom 5 Edit Delet 

Paul Jacques paul.jacquesegmail.com Canada Edit Delet 

Name Email Country Orders Actions 
6-5 


这 样 就 完成 了 客户 列表 页 面 ， 接 下 来 编写 客户 相关 页 面 。 


6.2 新建 客户 页 面 


新 建 客户 页 面 和 新 建 图 书页 面 类 似 ， 包 含 一 个 面包 丑 导 航 和 一 系列 
表单 字段 列表 项 。 


复制 new-book.html 页 面 并 重 命名 为 new-customerhtml 页 面 。 对 侧 
边栏 中 的 Customers 菜单 项 应 用 is-active, 并 将 面包 居 导 航 中 的 “book” 
YA “customer”. 


下 面 开发 客户 表单 。 除 第 一 个 输入 框 和 最 后 两 个 按钮 外 ， 将 其 余 表 
单 内 容 全 部 删除 ， 如 图 6-6 所 示 。 
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A Leepwe EDGE Press Publishing at the speed of technology Alex Johnson 
Customers / New customer 
@ Dashboard 
Title 
忆 Books 


国 Orders 
Create customer Cancel 











图 6-6 


对 于 第 1 个 输入 框 ， 只 需要 更 改 Label 元 素 和 提示 文本 即 可 ， 效 果 
如 图 6-7 所 示 。 


<div class="field"> 
<div class="field"> 
<label class="Label">Full name</label> 
<div class="control"> 
<input class="input is-large" type="text" placeholder="e.g. Alex 
Smith" required> 
</div> 
</div> 
</div> 





Full name 








图 6-7 
第 2 个 字段 是 带 信封 图 标的 邮箱 输入 框 ， 效 果 如 图 6-8 所 示 。 


<div class="field"> 
<label class="Label">Email</label> 
<div class="control has-icons-left"> 
<input class="input" type="email" placeholder="e.g. alexjohn- 
son@gmail.com" required> 
<span class="icon is-small is-left"> 
<i class="fa fa-envelope"></i> 
</span> 
</div> 
</div> 
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Email 
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第 3 个 和 第 4 个 输入 框 是 客户 地 址 输入 表单 ， 第 4 个 输入 框 不 需要 
label 元 素 ， 效 果 如 图 6-9 所 示 。 


<div class="field"> 
<label class="Label">Address</label> 
<div class="control"> 
<input class="input" type="text" placeholder="Number and street name" re- 
quired> 
</div> 
</div> 


<div class="field"> 
<div class="controLl"> 
<input class="input" type="text" placeholder="Second address line (op- 
tional)"> 
</div> 
</div> 





Address 
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邮编 、 城 市 、 国 家 (地 区 ) 字段 输入 框 通过 Bulma 的 列 来 展示 ， 效 
果 如 图 6-10 所 示 。 


<div class="columns is-multiline"> 

<div class="column is-12-tablet is-6-tablet is-4-desktop"> 
<label class="lLabel">Postcode / Zipcode</label> 
<div class="control"> 

<input class="input" type="text" placeholder="e.g. 67202" required> 

</div> 

</div> 

<div class="column is-12-tablet is-6-tablet is-4-desktop"> 
<label class="Label">City</label> 
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<div class="control"> 
<input class="input" type="text" placeholder="e.g. San Francisco" re- 
quired> 
</div> 
</div> 


<div class="column is-12-tablet is-6-tablet is-4-desktop"> 
<label class="Label">Country</label> 
<div class="control"> 
<div class="select"> 
<select> 
<option>-- Choose a country --</option> 
<option>Canada</option> 
<option>United Kingdom</option> 
<option>United States</option> 
</select> 
</div> 
</div> 
</div> 
</div> 





Postcode / Zipcode City Country 


-- Choose a country -- 
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最 后 的 按钮 只 需要 更 名 即 可 ， 效 果 如 图 6-11 所 示 。 


<div class="field"> 
<div class="buttons"> 
<button class="button is-medium is-success">Create customer</button> 
<button class="button is-medium is-light">Cancel</button> 
</div> 
</div> 





Create customer Cancel 


图 6-11 
完整 页 面 效 果 如 图 6-12 所 示 。 
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HF Breevwe EDGE PRESS Publishing at the speed of technology Alex Johnson 


Customers / New customer 
@ Dashboard 
B Book Full name 
ooks 
国 orders Email 
Address 
Postcode / Zipcode City Country 


-- Choose a country -- 


Create customer Cancel 
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这 样 就 完成 了 客户 新 建 页 面 , 客户 编辑 页 面 可 以 复 用 该 页 面 的 代码 。 


客户 编辑 模板 


正如 图 书 编辑 页 面 ， 客 户 编辑 页 面 与 客户 新 建 页 面相 比 ， 只 是 表单 
内 容 已 填充 了 。 





复制 new-customer.html 页 面 ， 重 命名 为 edit-customer.html Wi, FF 
做 如 下 更 改 ， 效 果 如 图 6-13 所 示 。 


口 Bnew Stet “Edit customer” o 

口 给 每 一 个 必 填 项 添加 内 容 。 

口 选择 一 个 国家 ( 地 区 )。 

O 将 绿色 按钮 的 文本 改 为 “Save changes” o 
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Customers / Edit customer 


Full name 
John Miller 


Email 
johnmiller@gmail.com 
Address 


55 Long Bridge road 


Postcode / Zipcode City 


78170 


Save changes Cance 


Los Angeles 





Country 


United States 
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对 国家 ( 地 区 ) 选择 框 添 加 selected 属性 : 


<select> 


<option>-- Choose a country --</option> 


<option>Canada</option> 


<option>United Kingdom</option> 


<option selected>United States</option> 


</select> 


6.3 人 小结 


本 章 介绍 了 基本 表格 的 开发 ， 第 7 章 将 介绍 高 级 表格 的 创建 。 





第 7 章 


创建 更 多 表格 及 下 拉 菜 


本 章 继续 在 下 拉 菜 单 中 使 用 表格 。 如 果 读 者 跟随 前 文 的 讲解 进行 操 
作 ， 那 么 至 此 已 经 创建 了 应 用 程序 的 大 部 分 功能 ， 然 而 需要 做 的 还 有 
很 多 。 

订单 内 容 将 客户 和 一 本 或 多 本 书 关联 起 来 ， 每 条 订单 都 包含 如 下 
信息 : 


Aw. 


D id 标识 符 ; 

口 关联 的 客户 ; 

O 日 期 ; 

O 图 书 列表 ; 

口 订单 状态 (进行 中 、 成 功 、 失 败 ); 
口 费用 总 计 。 





完整 示例 见 随 书 代码 。 
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订单 列表 


订单 列表 可 以 使 用 类 似 于 客户 列表 的 表格 进行 展示 。 


复制 customers.html 页 面 ， 重 命名 为 orders.html 页 面 ， 然 后 做 如 下 


改动 ， 效 果 见 图 7-1。 


口 更 改 侧 边栏 is-active 类 的 应 用 对 象 。 

O 将 标题 改 为 “Orders ”。 

口 把 “3 customers” 改 为 “2 orders”. 

O BR “New” io 

O 输入 框 提示 文本 改 为 “Order# customer...” . 








Orders 





2 orders Search All With orders Without orders 








7-1 
移 除 “New” 按 钮 是 因为 订单 是 当 客 户 从 网 站 上 买书 时 自动 生成 的 。 
表格 包含 如 下 新 列 ， 如 图 7-2 所 示 。 
口 订单 。 
口 客户 。 
口 日 期 。 
口 图 书 数目 。 
口 状态 。 
口 费用 总 计 。 
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<table class="table is-hoverable is-fullwidth"> 


<thead> 
<tr> 
<th>Order #</th> 
<th>Customer</th> 
<th>Date</th> 
<th>Books</th> 
<th>Status</th> 
<th class="has-text-right">Total</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<th>Order #</th> 
<th>Customer</th> 
<th>Date</th> 
<th>Books</th> 
<th>Status</th> 
<th class="has-text-right">Total</th> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
<td> 
<a href="edit-order .html"><strong>787352</strong></a> 
</td> 
<td> 
<a href="edit-customer.html">John Miller</a> 
</td> 
<td>Nov 18, 17:38</td> 
<td>2</td> 
<td> 
<span class="tag is-warning">In progress</span> 
</td> 
<td class="has-text-right">$56.98</td> 
</tr> 
</tbody> 
</table> 


O has-text-right: 文本 居 右 对 齐 。 
O tag: 标签 组 件 。 


QO) is-warning: 警告 提示 。 
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Order# Customer Date Books Status Total 

787352 John Miller Nov 18, 17:38 2 Inprogress $56.98 

Order # Customer Date Books Status Total 
7-2 


使 用 Bulma 的 tag 组 件 显示 订单 状态 ， 对 应 标签 组 件 修 饰 符 类 如 下 
所 示 : 


O 进行 中 一 > is-warning; 
O 成 功 一 is-success; 
O 失败 一 is-danger。 








添加 新 的 订单 内 容 ， 完 成 订单 页 面 ， 如 图 7-3 所 示 。 








A Breve EDGE Press Publishing at the speed of technology Alex Johnson ~ 
Orders 
@ Dashboard 
2 orders Search All With orders Without orders 
局 Books 
E Customers Order # Customer Date Books Status Total 
787352 John Miller Nov 18, 17:38 2 $56.98 
289050 John Miller Nov 16, 11:45 1 $21.99 
Order # Customer Date Books Status Total 
45 47 86 Previous Next page 
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7.2 订单 编辑 页 面 


复制 orders.html HM, 重 命名 为 edit-order.html 页 面 , 并 将 右 侧 主 区 
域内 容 移 除 ， 如 图 7-4 所 示 。 
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A Brevis EDGE PRESS Publishing at the speed of technology Alex Johnson 


@ Dashboard 
局 Books 


B Customers 








7-4 





每 条 订单 都 有 一 个 自动 生成 的 订单 id 用 作 标 题 展 示 , 位 于 面包 居 下 ， 
如 图 7-5 所 示 。 


<nav class="breadcrumb"> 
<ul> 
<li> 
<a href="orders.html">Orders</a> 
</li> 
<li class="is-active"> 
<a>Edit order</a> 
</li> 
</ul> 
</nav> 


<h1 class="subtitle is-3"> 
<span class="has-text-grey-light">Order</span> <strong>787352</strong> 
</h1> 





Orders / Edit order 


787352 


7-5 











每 条 订单 包含 了 客户 和 图 书 的 对 应 关系 ， 可 用 两 列 展示 这 种 关系 。 


<div class="columns is-desktop"> 
<div class="column is-4-desktop is-3-widescreen"> 
<!-- 左 列 展示 订单 信息 与 客户 --> 
</div> 
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<div class="column"> 
<!-- 右 列 为 图 书 列表 --> 
</div> 
</div> 


7.2.1 订单 信息 


订单 信息 大 多 是 只 读 的 ， 只 有 订单 状态 可 更 改 ， 


栏 添加 如 下 代码 ， 效 果 见 图 7-6。 


<p class="heading"> 
<strong>Date</strong> 
</p> 
<p class="content"> 
Nov 18, 17:38 
</p> 


<p class="heading"> 
<strong>Status</strong> 

</p> 

<div class="buttons"> 


在 上 诉 代码 的 左 侧 


<button class="button is-small is-warning">In progress</button> 
<button class="button is-small is-success is-outlined">Successful</button> 
<button class="button is-small is-danger is-outlined">Failed</button> 


</div> 


<p class="heading"> 
<strong>Customer</strong> 


</p> 
<p class="content"> 
<strong> 
<a href="edit-customer.html">John Miller</a> 
</strong> 
<br> 
<code>johnmiller@gmail.com</code> 
<br> 
55 Long Bridge road 
<br> 
78170 Los Angeles 
<br> 


United States 
</p> 
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DATE 
Nov 18, 17:38 


STATUS 


CUSTOMER 

John Miller 
johnmiller@gmail.com 

55 Long Bridge road 

78170 Los Angeles 

United States 
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这 3 “MLE HJR, HRS ED PARAS, R FAVA 
个 按钮 处 于 选中 状态 。 


客户 名 可 链接 到 订单 编辑 页 面 ， 以 便 客 户 及 时 更 新 订单 状态 。 


7.2.2 ”图书 列表 


之 前 编写 的 books.html 页 面 的 图 书 列表 是 栅 格 化 的 box 组 件 ， 这 里 
的 图 书 列表 是 供用 户 选 择 的 图 书 列表 ， 不 必 像 Books 页 面 那 般 详 细 ， 所 
以 这 里 用 Bulma 的 表格 组 件 来 展示 。 


在 右 侧 列 添加 如 下 代码 片段 ， 效 果 见 图 7-7。 


<p class="heading"> 
<strong>Books</strong> 
</p> 
<table class="table is-bordered is-fullwidth"> 
<thead> 
<tr> 
<th class="is-narrow">Cover</th> 
<th>Title</th> 
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<th class="has-text-right is-narrow">Price</th> 
<th class="has-text-right is-narrow">Amount</th> 
<th class="has-text-right is-narrow">Total</th> 


</tr> 
</thead> 
<tfoot> 
<tr> 
<th colspan="5" class="has-text-right">$42.98</th> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
<td> 
<img src="images/tensorflow. jpg" width="40"> 
</td> 
<td> 
<a href="edit-book.html"> 
<strong> 
TensorFlow For Machine Intelligence 
</strong> 
</a> 
</td> 
<td class="has-text-right"> 
$22.99 
</td> 


<td class="has-text-right"> 
<input class="input is-small" type="number" value="1" maxlength="2" 
max="2"> 
</td> 
<td class="has-text-right"> 
$22.99 
</td> 
</tr> 
<tr> 
<td> 
<img src="images/js-framework.jpg" width="40"> 
</td> 
<td> 
<a href="edit-book.html"> 
<strong> 
Choosing a JavaScript Framework 
</strong> 
</a> 
</td> 
<td class="has-text-right"> 
$19.99 
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</td> 
<td class="has-text-right"> 
<input class="input is-small" type="number" value="1" maxlength="2" 





max="2"> 
</td> 
<td class="has-text-right"> 
$19.99 
</td> 
</tr> 
</tbody> 
</table> 
BOOKS 
Cover Title Price Amount Total 
TensorFlow For Machine $22.99 1 $22.99 
intelligence 
一 Choosing a JavaScript $19.99 1 $19.99 
如 
时 Framework 
$42.98 
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每 一 行 代表 客户 的 一 次 购买 记录 ， 可 以 链接 到 图 书 详情 ， 图 书 数量 
是 可 编辑 的 。 


最 后 一 列 显 示 总 花费 。 


7.2.3 行内 表单 


更 改 订单 的 原因 有 很 多 : 
a 一 本 书 脱销 了 ，; 





口 客户 想 再 买 一 本 ; 
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口 客户 买 错 书 了 ， 想 换 一 本 ; 
口 订单 中 增加 一 本 书 。 





这 就 是 为 什么 书 的 数量 是 可 编辑 的 ， 而 用 户 需要 能 够 添加 尚未 在 列 
表 中 的 书 。 


在 表格 的 tbody 最 后 新 增 一 行 ， 如 图 7-8 所 示 。 


<tr> 
<td colspan="5"> 
<div class="field is-grouped is-grouped-right"> 
<div class="control"> 
<div class="select is-small"> 
<select> 
<option>TensorFlow For Machine Intelligence</option> 
<option>Docker in Production</option> 
<option>Developing a Gulp.js Edge</option> 
<option>Learning Swift</option> 
<option>Choosing a JavaScript Framework</option> 
<option>Deconstructing Google Cardboard Apps</option> 
</select> 
</div> 
</div> 
<div class="control"> 
<input class="input is-small" type="number" value="1" placehold- 
er="Amount" maxlength="2" max="2"> 
</div> 
<div class="control"> 
<a class="button is-small is-link">Add book</a> 





</div> 
</div> 
</td> 
</tr> 
TensorFlow For Machine Intelligence v 1 Add book 
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借助 field is-grouped 类 ， 可 以 将 一 组 表单 项 以 一 行 展 示 ， 得 到 
7-8 所 示 的 水 平 表单 。 





7.3 小结 





这 样 就 完成 了 订单 相关 页 面 ， 如 图 7-9 所 示 。 
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BA Breevwe EDGE PRESS 


@ Dashboard 
局 Books 


B Customers 


Publishing at the speed of technology 


Orders / Edit order 


787352 


DATE 


Nov 18, 17:38 


STATUS 


CUSTOMER 
John Miller 

johnmiller@gmail.com 
55 Long Bridge road 
78170 Los Angeles 
United States 








1] [es 





Books 
Cover Title 
TensorFlow For Machine 
Intelligence 
= Choosing a JavaScript 
os 
~~ Framework 





TensorFlow For Machine Intelligence 


Alex Johnson 


Price Amount Total 
$22.99 1 $22.99 
$19.99 1 $19.99 


$42.98 














接 下 来 开发 Dashboard 页 面 。 
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第 8 章 


创建 通知 和 卡片 功能 


前 面 介 绍 了 Bulma 框架 有 很 多 组 件 和 修饰 符 类 可 供 选 用 ， 其 设计 初 
衷 就 是 创建 简洁 和 结构 化 的 用 户 界面 , 而 不 需要 编写 CSS 代码 , 很 棒 吧 ! 
当然 ， 随 时 可 以 使 用 变量 修改 Bulma 框架 默认 功能 以 及 添加 自 定义 样式 。 


关于 Bulma， 还 有 儿 个 方面 未 提 及 ， 包 括 通知 功能 和 卡片 功能 。 下 
面 完成 这 个 应 用 程序 ， 后 文 将 介绍 如 何 将 Bulma 与 原生 JavaScript 以 及 
Angular, Vue 和 React 这 些 前 端 框 架 结 合 使 用 。 


Dashboard 页 面 是 用 户 登 录 之 后 进入 的 页 面 。 通 党 最 后 设计 该 页 面 ， 
为 它 相 当 于 其 他 页 面 的 概览 和 快捷 方式 。 其 思想 是 使 用 其 他 页 面 的 内 
容 ’ 并 以 简洁 的 方式 呈现 它们 o 





Dashboard 的 布局 将 是 一 个 组 件 顶 格 , 每 个 组 件 都 与 一 项 或 多 项 内 容 
相关 : 
口 核心 指标 ; 
口 最 新 订单 列表 ; 
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O 热门 图 书 ; 
口 和 忠实 客户 。 





使 用 Bulma 的 标准 组 件 ， 可 以 轻松 构建 包含 大 量 用 例 的 Dashboard 
页 面 。 


8.1 标题 、 时 间 范 围 


Dashboard 的 主要 作用 是 概览 一 定时 间 范 围 内 的 信息 , 以 便 用 户 对 管 
理 区 域 的 状态 一 目 了 然 。 


复制 books.html 页 面 并 将 右 侧 列 的 代码 全 部 移 除 ( 从 Books 标题 到 
分 页 组 件 )， 只 保留 项 部 导航 栏 和 侧 边栏 菜单 ， 并 对 Dashboard 菜单 项 应 
用 is-active 类 ， 如 图 8-1 所 示 。 





@ Breve EDGE PRESS Publishing at the speed of technology Alex Johnson 


@ Dashboard 


Æ Books 
B Customers 


B Orders 
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在 右 侧 区 域 编写 一 个 包含 标题 和 下 拉 菜 单 的 Level 组 件 ， 效 果 如 
8-2 所 示 。 


<div class="level"> 
<div class="Level-left"> 
<h1 class="subtitle is-3"> 
<span class="has-text-grey-Light">Hello</span> <strong>Alex Johnson</ 
strong> 
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</hi> 
</div> 
<div class="Level-right"> 
<div class="select"> 
<select> 
<option>Today</option> 
<option>Yesterday</option> 
<option>This Week</option> 
<option selected>This Month</option> 
<option>This Year</option> 
<option>ALl time</option> 
</select> 
</div> 
</div> 
</div> 


has-text-grey-light: 文本 排版 辅助 类 ,给 文本 设置 灰色 以 及 light 
字 重 。 











Alex Johnson This Month ~ 





图 8-2 
标题 中 提 及 用 户 名 ， 可 作为 对 用 户 登 录 状 态 的 反馈 。 


右边 是 一 个 下 拉 菜 单 ， 可 以 选择 Dashboard 数据 的 时 间 范 围 。 


8.2 ”核心 指标 
用 户 在 Dashboard 页 面 往往 做 短暂 停留 : 进入 该 页 面 ， 快 速 浏览 并 
转 至 感 兴趣 的 地 方 ， 这 也 是 Dashboard 页 面 信息 展示 简明 扼要 的 原因 。 


Bulma 提供 了 各 种 颜色 的 通知 元 素 。 与 大 字号 的 标题 搭配 ， 是 展示 
核心 指标 的 绝 佳 组 合 。 


在 level 组 件 之 后 添加 如 下 列 ， 效 果 见 图 8-3。 
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<div class="columns is-multiline"> 
<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-link has-text"> 
<p class="title is-1">232</p> 
<p class="subtitle is-4">0rders</p> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-info has-text"> 
<p class="title is-1">$7,648</p> 
<p class="subtitle is-4">Revenue</p> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-primary has-text"> 
<p class="title is-1">1,678</p> 
<p class="Subtitle is-4">Visitors</p> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-success has-text"> 
<p class="title is-1">20,756</p> 
<p class="subtitle is-4">Pageviews</p> 
</div> 
</div> 
</div> 





232 $7,648 


Orders Revenue 


1,678 20,756 


Visitors Pageviews 














图 8-3 


这 些 列 是 响应 式 的 ， 所 以 在 移动 设备 和 平板 设备 上 会 显示 为 一 列 ， 
在 桌面 设备 上 会 显示 为 两 列 ， 在 宽屏 上 会 显示 为 四 列 。 
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8.3 最 新 订单 列表 


订单 是 最 有 可 能 频繁 更 改 的 内 容 类 型 ， 因 为 它们 是 由 站 点 自动 生成 
的 。 这 也 是 为 什么 在 导航 到 Orders 页 面 之 前 就 应 显示 其 最 新 状态 。 











因为 核心 指标 组 件 是 啊 应 式 的 ， 所 以 可 以 在 其 后 面 添加 更 多 列 
元 素 。 


在 最 后 一 个 <div class="column is-12-tablet is-6-desktop is-3- 
widescreen"> 的 后 面 添加 如 下 代码 (包含 在 <div class="columns is-multiline"> 
标签 中 )， 效 果 见 图 8-4。 


<div class="column is-12-tablet is-6-desktop is-4-fullhd"> 
<div class="card"> 
<div class="card-content"> 
<h2 class="title is-4"> 
Latest orders 
</h2> 


<div class="level"> 
<div class="Level-left"> 
<div> 
<p class="title is-5 is-marginless"> 
<a href="edit-order .html">787352</a> 
</p> 
<small> 
Nov 18, 17:38 by <a href="edit-customer.htmL">John Miller</a> 
</small> 
</div> 
</div> 
<div class="Level-right"> 
<div class="has-text-right"> 
<p class="title is-5 is-marginless"> 
$56.98 
</p> 
<span class="tag is-warning">In progress</span> 
</div> 
</div> 
</div> 
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<a class="button is-link is-outlined" href="orders.html">View all 
orders</a> 
</div> 
</div> 
</div> 





Latest orders 


787352 $56.98 


Nov 18, 17:38 by John Miller 


View all orders 
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利用 level 组 件 在 左 侧 显示 订单 i、 日 期 和 客户 来 节省 垂直 空间 ， 
并 将 费用 总 计 和 状态 推 到 右 侧 。 


在 第 一 个 level 组 件 和 “View all orders” 按 钮 之 间 ， 添 加 另外 两 条 
订单 数据 ， 如 图 8-5 所 示 。 





Latest orders 


787352 $56.98 
Nov 18, 17:38 by John Miller 

289050 $22.99 
Nov 16, 11:45 by Samantha Rogers 
918478 $22.99 


Nov 12, 21:57 by Simon Jefferson 


VIEW ALL ORDERS 
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8.4 使 用 card 组 件 展示 热门 图 书 


接 下 来 创建 card 组件 ,Bulma 的 card 组 件 非 常 适 于 小 块 区 域 展 示 信 
息 。card 组 件 通 常 和 图 片 、 视 频 等 元 素 一 起 使 用 。card 组 件 应 用 广泛 ， 
尤其 在 电子 商务 网 站 中 。 下 面 给 应 用 添加 一 些 卡 片 展示 。 


card 组 件 的 基本 结构 


<div class="card"> 
<div class="card-image"> 
<!-- 此 处 放置 图 片 --> 
<div> 
<div class="card-content"> 
<!-- 此 处 放置 内 容 --> 
<div> 
</div> 


在 我 们 的 例子 中 ， 将 会 使 用 media 组 件 作为 card 组 件 的 内 容 。 
Dashboard 页 面 应 该 包含 可 随时 间 变 化 的 内 容 模块 ， 比 如 热门 书 单 。 


可 以 复 用 与 前 一 列 相同 的 布局 , 但 要 使 用 media 组 件 , 而 不 是 level 
组 件 ， 效 果 如 图 8-6 所 示 。 


<div class="column is-12-tablet is-6-desktop is-4-fullhd"> 
<div class="card"> 
<div class="card-content"> 
<h2 class="title is-4"> 
Most popular books 
</h2> 


<div class="media"> 
<div class="media-left is-marginless"> 
<p class="number">1</p> 
</div> 
<div class="media-left"> 
<img src="images/swift.jpg" width="40"> 
</div> 
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<div class="media-content"> 

<p class="title is-5 is-spaced is-marginless"> 
<a href="edit-book.html">Learning Swift</a> 

</p> 

</div> 

<div class="media-right"> 
146 sold 

</div> 

</div> 


<a class="button is-link is-outlined" href="books.html">View all 
books</a> 
</div> 
</div> 
</div> 





Most popular books 


1 x Learning Swift 146 sold 
des 





View all books 
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其 中 使 用 了 两 个 media-left 元 素 ， 这 使 得 视图 可 并 排放 置 多 个 罕 元 
R (排名 和 封面 图 片 )。 


按 第 1 本 书 格式 添加 第 2 本 和 第 3 本 书 到 列表 中 ， 如 图 8-7 所 示 。 
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Most popular books 
1 Fx Learning Swift 146 sold 
des 
2 TensorFlow For 56 sold 
Machine 
Intelligence 
3 =“! Choosing a 47 sold 
* | JavaScript 
Framework 
| View all books 
8-7 
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在 最 后 一 列 展示 忠实 客户 数据 ， 紧 接着 上 一 列 添加 如 下 代码 ， 效 果 
见 图 8-8。 


<div class="column is-12-tablet is-6-desktop is-4-fullhd"> 
<div class="card"> 
<div class="card-content"> 
<h2 class="title is-4"> 
Most loyal customers 
</h2> 


<div class="media"> 
<div class="media-left is-marginless"> 
<p class="number">1</p> 
</div> 
<div class="media-content"> 
<p class="title is-5 is-spaced is-marginless"> 
<a href="edit-customer.html">John Miller</a> 


</p> 
<p class="subtitle is-6"> 
United States 

</p> 

</div> 

<div class="media-right"> 
7 orders 

</div> 

</div> 
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<a class="button is-link is-outlined" href="customers.htmL">View all 


customers</a> 
</div> 
</div> 
</div> 


设置 为 蓝 色 。 





和 文本 颜色 。 


Q button: Bulma 按钮 组 件 ， 为 按钮 添加 基础 样式 。 
O is-link: 类 似 于 is-primary 修饰 符 类 ，is-Link 将 按钮 文本 颜色 


O is-outLined:“ 幽 灵 ” 按 钮 修饰 符 ， 去 除 按钮 背景 色 ， 设 置 边 杠 





Most loyal customers 


John Miller 
United States 


一 


View all customers 





7 orders 
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其 中 使 用 Bulma 的 media 组 件 展示 用 户 序号 ， 如 同 订单 列表 中 使 用 
media 组 件 一 样 。 继 续 添加 第 2 条 和 第 3 条 数据 到 客户 列表 中 ， 如 图 8-9 


所 示 。 
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Most loyal customers 


1 John Miller 7 orders 
United States 


2 Samantha Rogers 5 orders 
United Kingdom 


Paul Jacques 2 orders 
3 
Canada 


View all customers 
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这 样 就 完成 了 Dashboard 页 面 。 可 以 像 订 单列 表 和 客户 列表 那样 添 
加 更 多 数据 到 Dashboard 页 面 ， 如 图 8-10 所 示 。 





F Breede epae Peess punishing at the speed ot technology Max Johnson v 


Hello Alex Johnson This Month 





Latest orders 











@ Books 
Bei 232 $7,648 1,678 
Di Orders Revenue Visitors 


Most popular books 














View all books 


20,756 
Pageviews 


Most loyal customers 


787352 $56.98 1 Learning 146 sold 1 John Miller 7 orders 
Nov 18, 17:38 by John Milier Swift United States 
289050 $22.99 2 Samantha Rogers $ orders 
Nov 16, 11:45 by Samantha Rogers 2 [| TensorFlow 56 sold United Kingdom 

u For Machine 

OE intelligence 
918478 $22.99 3 Paul Jacques 2 orders 
Nov 12, 21:57 by Siman Jefferson Canada 

3 | Choosinga 47 sold 

| View al orders | | JavaScript | View all customers | 
l J Framework 
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8.6 小 结 


如 前 所 述 ，Bulma 组 件 有 多 种 形式 。 


口 布局 组 件 : section, columns, level 等 。 
口 元 素 组 件 : box, button, input, notification 等 。 
a 复合 组 件 : navbar. card, media, menu, pagination 等 。 





O 修饰 符 类 : has-text-grey-light, is-hidden-tablet-only 等 。 


大 多 数 Bulma 用 户 喜欢 将 这 些 功 能 以 不 同方 式 组 合 使 用 ， 以 构建 网 
站 所 需 的 UI, 重点 是 可 以 设置 自己 的 主题 色 并 更 改 Bulma 的 初始 变量 以 
实现 定制 。 





第 9 章 将 重点 介绍 如 何在 原生 JavaScript 中 使 用 Bulma。 


第 9 章 


在 原生 JavaScript 中 应 用 Bulma 


Bulma 框架 的 实现 没有 用 到 JavaScript。 本 章 将 介绍 如 何 使 用 原生 
JavaScript 控制 之 前 开发 的 管理 页 面 的 不 同 组 件 , 内容 涵盖 管理 页 面 中 以 
下 组 件 的 使 用 : 


口 问题 报告 模 态 框 ; 

口 移动 端 toggle 菜单 组 件 ; 
O 通知 组 件 ; 

O 下 拉 菜 单 ; 

口 删除 图 书 ; 

口 删除 用 户 。 





9.1 问题 报告 模 态 框 
开发 问题 报告 模 态 框 会 用 到 如 下 组 件 : 


口 按钮 ; 
口 modal 组 件 ; 
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O notification 元 素 。 


在 我 们 的 示例 中 ， 需 要 一 个 带 有 data-target 属性 的 按钮 ， 属 性 值 
为 对 应 模 态 框 的 id。 在 Bulma 中 ， 可 以 使 用 is-active 类 来 控制 模 态 框 
的 显示 和 隐藏 。 使 用 原生 JavaScript 通过 dom 元 素 的 classList 属性 来 添 
加 或 删除 is-active 类 ， 从 而 实现 对 应 模 态 框 的 显示 或 隐藏 。 


<!-- 触发 按钮 标记 --> 
<button class="button is-white open-modal-button" data-target="report-a-bug"> 
<span class="icon"> 
<i class="fa fa-bug"></i> 
</span> 
<span> 
Report a bug 
</span> 
</button> 


也 可 以 添加 一 个 notification 元 素 类 显示 子 元 素 的 成 功 或 错误 状 
态 。 如 下 是 可 在 模 态 框 中 使 用 的 notification 元 素 的 代码 片段 。 

<!-- 通知 元 素 --> 

<div class="notification is-success is-hidden modal-success-notification"> 


<span class="fa fa-bug"></span> Thank You. Your bug has been reported. 
</div> 


利用 delete 类 给 模 态 框 添加 一 个 关闭 按钮 。 为 了 通过 JavaScript 探 
制 模 态 框 的 关闭 ， 需 要 给 按钮 添加 close-modal-button 类 ，JavaScript 将 
通过 该 类 来 关联 按钮 触发 模块 框 关 闭 功能 。 关 闭 按钮 的 代码 如 下 : 

<button class="delete close-modal-button" aria-label="close"></button> 


模 态 框 UI 代码 实现 如 下 : 


<!-- modal 标记 --> 
<div class="modal" id="report-a-bug"> 
<div class="modal-background"></div> 
<div class="modal-card"> 
<header class="modal-card-head"> 
<p class="modal-card-title">Report a Bug</p> 
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<!-- 关闭 按钮 --> 
<button class="delete close-modal-button" aria-label="close"></ 
button> 
</header> 
<section class="modal-card-body"> 
<!-- 通知 元 素 --> 
<div class="notification is-success is-hidden modal-success- 
notification"> 
<span class="fa fa-bug"></span> Thank You. Your bug has been 
reported. 
</div> 
<textarea class="textarea" placeholder="Let us know what prob- 
lems you faced."> 
</textarea> 
</section> 
<footer class="modal-card-foot"> 
<button class="button is-success send-bug-report">Send</button> 
<button class="button close-modal-button">Cancel</button> 
</footer> 
</div> 
</div> 


下 面 这 段 JavaScript 代码 是 问题 报告 模 态 框 的 逻辑 脚本 , 适用 于 应 用 
程序 中 的 所 有 模 态 框 。 也 可 以 根据 需求 决定 是 否 添加 通知 组 件 并 使 用 
JavaScript 来 控制 显示 与 否 。 


// 选择 所 有 模 态 框 、 关 闭 按钮 和 触发 按钮 

var modals = document.querySelectorAll('.modal'); 

var modalButtons = document.querySelectorALl('.open-modal-button' ); 
var modalClose = document.querySelectorALl('.close-modal-button'); 


// 成 功 的 消息 通知 
var successMessages = document.querySelectorAll('.modal-success- 
notification'); 


// 给 触发 按钮 添加 事件 监听 器 
if (modalButtons.length > 0) { 
modalButtons.forEach(button => { 
button.addEventListener('click', function() { 
document .getElementById(this.dataset.target).classList.add('is- 
active'); 
p; 
p; 
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给 所 有 关闭 按钮 添加 事件 监听 器 
if (modalClose.length > 0) { 
modalClose.forEach(closeButton => { 
closeButton.addEventListener('click', function() { 
modals.forEach(modal => { 
modal.classList.remove('is-active'); 
// 关闭 模 态 框 ， 隐 藏 成 功 的 通知 
successMessages.forEach(message => { 
message.cLlassList.add('is-hidden'); 
p; 
H; 
p; 
p; 
} 


// 展示 成 功 的 通知 
var sendBugReport = document.querySelector('.send-bug-report'); 
if (sendBugReport !== null) { 
sendBugReport.addEventListener('click', function() { 
successMessages.forEach(message => { 
message.cLlassList.remove('is-hidden' ); 
p; 
p); 
} 


解释 一 下 以 上 JavaScript 代码 , 对 于 这 个 问题 报告 模 态 框 , 我 们 给 触 
人 (含有 类 名 open-modal-button ) 添加 了 一 个 事件 监听 
器 ， 然 后 通过 close-modal-button 按钮 关闭 模 态 框 。 


9.2 ”移动 端 toggle 菜单 


当 视 口 宽度 小 于 特定 断 点 ，Bulma 导航 栏 会 用 一 个 汉堡 图 标 代 替 
需要 使 用 JavaScript 脚本 来 控制 导航 的 显示 和 隐藏 。 给 汉 供 图 标 添 加 事件 
监听 器 ， 当 点 击 展开 的 时 候 给 汉 供 元 素 和 菜单 项 添加 is-active 类 。 


var burger = document.querySelector('.burger'); 
var menu = document.querySelector('.navbar-menu' ) 
if (burger !== null) { 
burger.addEventListener('click', function() { 
burger.classList.toggle('is-active'); 
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menu.classList.toggle('is-active'); 


H); 


9.3 通知 


通知 组 件 可 用 于 对 用 户 操作 反馈 信息 ， 如 下 示例 给 问题 报告 模 态 杠 
添加 了 一 条 通知 消息 : 


<div class="notification is-success is-hidden modal-success-notification"> 
<button class="delete close-notification"></button> 
<span class="fa fa-bug"></span> Thanks. Your bug has been reported. 
</div> 


当 点 击 按钮 的 时 候 会 显示 通知 ， 点 击 通知 消息 组 件 的 关闭 图 标 即 可 
关闭 通知 消息 。 可 以 使 用 .close-notification 类 给 通知 的 关闭 图 标 添 加 
JavaScript 事件 监听 器 来 实现 关闭 逻辑 ， 实 现 脚本 如 下 : 


var closeNotification = document.querySelectorAll('.close-notification' ); 
if (closeNotification. length > 0) { 
closeNotification.forEach(closeIcon => { 
closeIcon.addEventListener('click', () => { 
closeIcon.closest('.notification').remove(); 
D; 
p; 


9.4 下 拉 菜 单 


在 Bulma 中 有 两 种 下 拉 菜 单 : 点 击 下 拉 和 悬浮 下 拉 。 可 以 通过 添加 
is-hoverable 类 实现 鼠标 指针 甚 浮 下 拉 效 果 。 


<div class="dropdown is-hoverable"> 
<div class="dropdown-trigger"> 
<button class="button" aria-haspopup="true" aria-controls="dropdown- 
menu"> 
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<span>Hover me</span> 
<span class="icon is-small"> 
<i class="fa fa-angle-down" aria-hidden="true"></i> 
</span> 
</button> 
</div> 
<div class="dropdown-menu" id="dropdown-menu" role="menu"> 
<div class="dropdown-content"> 
<div class="dropdown-item"> 
<p>You can insert <strong>any type of content</strong> within the 
dropdown menu.</p> 
</div> 
</div> 
</div> 
</div> 


ty E cE ER CS has PAS ARE, A SEBS 
击 下 拉 ， 可 以 给 按钮 添加 一 个 点 击 事件 并 给 菜单 加 上 is-active 类 。 使 
用 点 击 方式 控制 下 拉 菜 单 的 实现 脚本 如 下 : 


var dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)'); 
if (dropdowns.length > 0) { 
dropdowns.forEach(dropdown => { 
dropdown.addEventListener('click', event => { 
event. stopPropagation(); 
dropdown.classList.toggle('is-active'); 
p); 
p; 


document.addEventListener('click', event => { 
dropdowns.forEach(dropdown => { 
dropdown.classList.remove('is-active'); 
}) 
p; 


9.5 删除 图 书 功 能 


在 图 书 列表 中 添加 删除 图 书 功 能 的 实现 代码 如 下 ， 给 图 书 列表 的 每 
一 本 书 添加 一 个 删除 按钮 并 监听 点 击 删除 事件 ， 点 击 删除 对 应 图 书 。 
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// 删除 一 项 
var deleteItem = document.querySelectorALl('.delete-item'); 
if (deleteItem.length > 0) { 
deleteItem.forEach(button => { 
button.addEventListener('click', function() { 
button.closest('.column').remove(); 
p); 
}) 


9.6 删除 客户 功能 


如 下 代码 用 于 删除 客户 列表 中 的 客户 ， 在 客户 表格 中 添加 删除 按钮 
并 监听 点 击 删除 事件 ， 点 击 删除 对 应 客户 。 
// 删除 一 位 客户 
var deleteUserButton = document.querySelectorAll('.delete-user'); 
if (deleteUserButton. length > 0) { 
deleteUserButton.forEach(button => { 


button.addEventListener('click', function() { 
button.closest('tr').remove(); 


H); 


9.7 小 结 


本 章 介绍 了 如 何 将 Bulma 管理 页 面 模板 的 不 同 组 件 和 原生 JavaScript 
结合 使 用 。 


第 10 章 将 介绍 如 何在 Angular 中 使 用 Bulma。 


第 10 章 
在 Angular 中 使 用 Bulma 


Angular 是 一 个 前 端 框 架 ， 它 使 构建 Web 应 用 程序 变 得 十 分 简单 。 
Angular 集 声明 式 模板 、 依 赖 注入 、 端 到 端 工具 于 一 身 ， 并 集成 了 可 解决 
开发 痛 点 的 最 佳 实践 指南 , 但 它 没有 提供 丰富 的 UI 开发 体验 , 而 这 正 是 
Bulma 要 做 的 。 





正如 将 Bulma 与 JavaScript 集成 的 用 例 那样 简单 ， 下 面 把 Bulma Æ 
成 到 Angular 框架 中 。 首 先 需 要 做 如 下 准备 : 


O 命令 行 知识 ; 
ü Node.js; 
O Angular 命令 行 工具 。 





之 前 没有 安装 上 述 工具 也 不 用 担心 ， 它 们 易于 安装 和 运行 ， 从 
Node.js 官网 下 载 Node.js 并 按 指引 安装 即 可 。 安 装 好 Node.js 后 ， 需 要 通 
过 包 管 理工 具 npm 安装 Angular 命令 行 工具 。 


# 安装 Angular 的 命令 
npm install -g @angular/cli 
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准备 


下 面 一 步 一 步 创 建 一 个 新 的 Bulma 和 Angular 项 目 ， 这 涉及 许多 命 
令 行 操作 ， 但 不 必 担 心 ， 都 附 有 相应 的 解释 说 明 。 


O 将 命令 行路 径 切 换 到 项 目 存储 路 径 并 建立 项 目 根 目录 : 


mkdir my-repos 
cd my-repos 


口 创建 一 个 新 应 用 很 简单 ， 若 想 了 解 Angular 命令 行 的 更 多 功能 ， 


可 访问 cli.angular.io。Angular 命令 行 工具 会 帮 我 们 搭建 项 目的 本 
地 环境 ， 并 安装 运行 所 需要 的 依赖 包 。 


Ng new sample-application --style scss --routing 
cd sample-application 


O 将 Bulma 添加 到 Angular 应 用 中 : 


npm install bulma --save 
npm install font-awesome --save 


说 明 : 示例 项 目 使 用 了 Font Awesome, wA E2, TRF 
Font Awesome 官网 的 教程 文档 。 


口 将 Bulma 和 Font Awesome 添加 到 Angular 命令 行 配置 文件 .angular- 


clijson 的 样式 配置 项 中 。 


../node_modules/bulma/bulma.sass 
../node_modules/font-awesome/scss/font-awesome.scss 


添加 后 的 样式 配置 项 如 下 所 示 : 


"styles": [ 


], 


",./node_modules/bulma/bulma.sass", 
",./node_modules/font-awesome/scss/font-awesome.scss", 
"styles.scss" 
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口 完成 上 述 步骤 后 ， 项 目 就 可 以 运行 了 : 
npm start 

或 者 执行 如 下 命令 : 

ng serve --open 


上 述 命令 行 都 可 以 在 package.json 文件 中 自 定 义 配 置 。 


10.2 应 用 


为 一 家 图 书 出 版 公司 创建 书店 应 用 程序 。 从 面板 页 面 开始 ， 然 后 创 
建 图 书目 录 、 客 户 页 面 、 订 单列 表 页 。Bulma 提供 了 实现 这 些 需求 的 所 
有 功能 ， 我 们 需要 做 的 只 是 创建 应 用 组 件 。 


ng g component components/[component-name] 


建议 记 住 这 个 组 件 创建 命令 ， 因 为 之 后 的 操作 会 频繁 用 到 该 命令 。 


10.3 组 件 


打开 app.component.html 文件 并 在 其 中 编写 HTML 代码 ， 这 个 组 件 
将 是 整个 应 用 的 入 口 。 


首先 创建 一 个 如 图 10-1 所 示 的 顶部 导航 菜单 。 





HF Bueepwe Epecs PRESS Publishing at the speed of technology 











10-1 


创建 项 部 导航 菜单 可 能 会 用 到 navbar, navbar-brand, navbar-item, 
navbar-start 和 navbar-end， 使 用 Bulma 的 这 些 CSS 类 ,结合 如 下 所 示 
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的 HTML 代码 ， 就 可 以 完成 顶部 导航 菜单 : 


<nav class="navbar has-shadow"> 
<div class="navbar-brand"> 
<a class="navbar-item"> 
<img src="assets/images/logo.png"> 
</a> 
<div [ngClass]="{'is-active': active==true}" class="navbar -burger 
burger" (click)="active=!active"> 
<span></span> 
<span></span> 
<span></span> 
</div> 
</div> 


<div [ngClass]="{'is-active': active==true}" class="navbar-menu"> 
<div class="navbar-start"> 
<div class="navbar-item"> 
<small>Publishing at the speed of technology</small> 
</div> 
</div> 


<div class="navbar-end"> 
<div class="navbar-item has-dropdown is-hoverable"> 
<div class="navbar-link"> 
Alex Johnson 
</div> 
<div class="navbar-dropdown"> 
<a class="navbar-item" (click)="action()"> 
<div> 
<span class="icon is-smalL"> 
<i class="fa fa-user-circle-o"></i> 
</span> Profile 
</div> 
</a> 
<a class="navbar-item" (click)="action()"> 
<div> 
<span class="icon is-smalL"> 
<i class="fa fa-bug"></i> 
</span> Report bug 
</div> 
</a> 
<a class="navbar-item" (click)="action()"> 
<div> 
<span class="icon is-smalL"> 
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<i class="fa fa-sign-out"></i> 
</span> Sign Out 
</div> 
</a> 
</div> 
</div> 
</div> 
</div> 
</nav> 


如 上 所 示 ， 创 建 侧 边 栏 只 需要 menu, menu-list 和 menu-label 这 几 
个 CSS 类 就 能 实现 。 


<section class="section " 
<div class="columns "> 
<div class="column is-4-tablet is-3-desktop is-2-widescreen"> 
<nav class="menu"> 
<p class="menu-lLabel"> 
Menu 
</p> 
<ul class="menu-list"> 
<li> 
<a [routerLinkActive]="['is-active']" [router- 
Link]="['/dashboard']"> 


> 


" 


<span class="icon"> 
<i class="fa fa-tachometer"></i> 
</span> Dashboard 
</a> 
</li> 
<li> 
<a [routerLinkActive]="['is-active']" [router- 
Link]="['/books']"> 
<span class="icon"> 
<i class="fa fa-book"></i> 
</span> Books 
</a> 
</li> 
<li> 
<a [routerLinkActive]="['is-active']" [router- 
Link]="['/customers']"> 
<span class="icon"> 
<i class="fa fa-address-book"></i> 
</span> Customers 
</a> 
</li> 
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<li> 
<a [routerLinkActive]="['is-active']" [router- 
Link]="['/orders']"> 
<span class="icon"> 
<i class="fa fa-file-text-o"></i> 
</span> Orders 
</a> 
</li> 
</ul> 
</nav> 
</div> 
<main class="column 
<router-outlet></router-outlet> 
</main> 
</div> 
</section> 


"> 


需要 把 页 面 主要 内 容 区 标签 替换 为 <router-outLet></router-outLet> 
标签 ， 如 下 所 示 : 


<main class="column "> 
<router-outlet></router-outlet> 
</main> 


现在 为 项 目 添加 一 个 子 组 件 ， 可 以 通过 命令 行 创建 新 组 件 ， 也 可 以 
手动 添加 子 组 件 到 项 目 中 。Angular 命令 行 创建 命令 如 下 : 


ng g component components/dashboard -m routing.module 


执行 上 述 命令 后 , 找到 dashboard.component.html 文件 并 编写 HTML 
代码 即 可 。 下 面 的 内 容 基 于 上 面 创建 的 示例 。 需 要 注意 的 是 ， 对 于 这 部 
分 代码 ， 只 需要 在 主 内 容 代码 区 域 蔡 换 路 由 标签 即 可 。 





完整 示例 见 随 书 代码 。 





口 ARRE ( 见 图 10-2 ) 





Alex Johnson This Month 
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<div class="level"> 
<div class="Level-left"> 
<h1 class="subtitle is-3"> 
<span class="has-text-grey-light">Hello</span> 
<strong>Alex Johnson</strong> 
</hi> 
</div> 
<div class="Level-right"> 
<div class="select"> 
<select [(ngModel) ]="filter" (ngModelChange)="onChange(Sevent)"> 
<option>Today</option> 
<option>Yesterday</option> 
<option>This Week</option> 
<option>This Month</option> 
<option>This Year</option> 
<option>All time</option> 
</select> 
</div> 
</div> 
</div> 


a 摘要 


<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-link has-text"> 
<p class="title is-1">{{statistics[0].orders}}</p> 
<p class="subtitle is-4">0rders</p> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-info has-text"> 
<p class="title is-1">${{statistics[0].revenue}}</p> 
<p class="subtitle is-4">Revenue</p> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-primary has-text"> 
<p class="title is-1">{{statistics[0].visitors}}</p> 
<p class="subtitle is-4">Visitors</p> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
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<div class="notification is-success has-text"> 
<p class="title is-1">{{statistics[0].pageviews}}</p> 
<p class="subtitle is-4">Pageviews</p> 
</div> 
</div> 


口 内 容 卡 片 


<div class="column is-12-tablet is-6-desktop is-4-fullhd"> 
<div class="card"> 
<div class="card-content"> 
<h2 class="title is-4"> 
Latest orders 
</h2> 


<div class="level" *ngFor="Let order of orders; let i = index"> 
<div class="Level-left"> 
<div> 
<p class="title is-5 is-marginless"> 
<a [routerLink]="['/orders-edit']" 
[queryParams]="{id: order.id }">{{ order.number }}</a> 
</p> 
<small> 
{{ order.date }} by 
{{ order.customer }} 
</small> 
</div> 
</div> 
<div class="Level-right"> 
<div class="has-text-right"> 
<p class="title is-5 is-marginless"> 
S{{ order.total }} 


</p> 

<span *ngIf="order.status === 'In progress'" 
class="tag is-warning">{{ order.status }}</span> 

<span *ngIf="order.status === 'Successful'" 
class="tag is-success">{{ order.status }}</span> 

<span *ngIf="order.status === 'Failed'" 
class="tag is-failed">{{ order.status }}</span> 

</div> 
</div> 
</div> 


<a class="button is-link is-outlined" [routerLink]= 
"['/orders']">View all orders</a> 
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</div> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-4-fullhd"> 
<div class="card"> 
<div class="card-content"> 
<h2 class="title is-4"> 
Most popular books 
</h2> 


<div class="media" *ngFor="Let book of books; let i = index"> 
<div class="media-left is-marginless"> 
<p class="number">{{i + 1}}</p> 
</div> 
<div class="media-left"> 
<img src="assets/images/{{book.image}}" width="40"> 
</div> 
<div class="media-content"> 
<p class="title is-5 is-spaced is-marginless"> 
<a [routerLink]="['/books-edit']" 
[queryParams]="{id: book.id }">{{book.title}}</a> 
</p> 
</div> 
<div class="media-right"> 
{{ filter }} 
</div> 
</div> 


<a class="button is-link is-outlined" 
[routerLink]="['/books']">View all books</a> 
</div> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-4-fullhd"> 
<div class="card"> 
<div class="card-content"> 
<h2 class="title is-4"> 
Most loyal customers 
</h2> 


<div class="media" *ngFor="Let customer of customers; let i = 
index"> 
<div class="media-left is-marginless"> 
<p class="number">{{i + 1}}</p> 
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</div> 
<div class="media-content"> 
<p class="title is-5 is-spaced is-marginless"> 
<a [routerLink]="['/customers-edit']" 
[queryParams]="{id: customer.id }">{{ customer.name }}</a> 
</p> 
<p class="subtitle is-6"> 
<td>{{ customer.country }}</td> 


</p> 
</div> 
<div class="media-right"> 
{{ customer.orders }} orders 
</div> 
</div> 
<a class="button is-link is-outlined" [routerLink]="['/cus- 
tomers']">View all customers</a> 
</div> 
</div> 
</div> 


下 面 添 加 一 个 订单 组 件 ， 同 理 ， 可 以 通过 命令 行 创 建 组 件 。 
ng g component components/orders -m routing.module 


创建 完成 后 ， 打 开 orders.component.html 文件 并 添加 相应 的 HTML 
代码 ， 包 含 3 部 分 。 


(1) 页 眉 ( 见 图 10-3 ) 





Orders 


2 orders Clear All In progress Successful Failed 








10-3 
<hi class="title ">Orders</h1> 


<nav class="LeveL"> 
<div class="Level-left"> 
<div class="Level-item"> 
<p class="subtitle is-5"> 
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<strong>2</strong> orders 
</p> 
</div> 
<div class="lLevel-item is-hidden-tablet-only"> 
<div class="field has-addons"> 
<p class="control"> 
<input class="input" type="text" placeholder="Order 
#â€i" [(ngModel) J="userFilter.number"> 
</p> 
<p class="control"> 


<button class="button" (click)="userFilter.number = > 
Clear 
</button> 
</p> 
</div> 
</div> 
</div> 


<div class="Level-right"> 
<p class="Level-item" (click)="userFilter.status = 
><a><strong>ALl</strong></a></p> 


<p class="Level-item" (click)="userFilter.status = 'In pro- 
gress'"><a>In progress</a></p> 
<p class="Level-item" (click)="userFilter.status = 'Success- 


ful'"><a>Successful</a></p> 
<p class="Level-item" (click)="userFilter.status = 
"Failed'"><a>Failed</a></p> 
</div> 
</nav> 


(2) 栅 格 


<table class="table is-hoverable is-fullwidth"> 
<thead> 
<tr> 
<th>Order #</th> 
<th>Customer</th> 
<th>Date</th> 
<th>Books</th> 
<th>Status</th> 
<th class="has-text-right">Total</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
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<th>Order #</th> 
<th>Customer</th> 
<th>Date</th> 
<th>Books</th> 
<th>Status</th> 
<th class="has-text-right">Total</th> 
</tr> 
</tfoot> 
<tbody> 
<tr *ngFor="let order of orders | filterBy: userFilter | orderBy: 
order"> 
<td> 
<a [routerLink]="['/orders-edit']" [queryParams]="{id: or- 
der.id }"><strong>{{ order.number }}</strong></a> 
</td> 
<td> 
<a [routerLink]="['/customers']">{{ order.customer }}</a> 
</td> 
<td>{{ order.date }}</td> 
<td>{{ order.books }}</td> 


<td> 
<span *nglf="order.status === 'In progress'" class="tag 
is-warning">{{ order.status }}</span> 
<span *ngIf="order.status === 'Successful'" class="tag is- 
success">{{ order.status }}</span> 
</td> 
<td class="has-text-right">${{ order.total }}</td> 
</tr> 
</tbody> 
</table> 
(3) 分 页 


<nav class="pagination"> 
<a class="pagination-previous">Previous</a> 
<a class="pagination-next">Next page</a> 
<ul class="pagination-list"> 


<li> 
<a class="pagination-link">1</a> 
</li> 
<li> 
<span class="pagination-ellipsis">da€| </span> 
</li> 
<li> 


<a class="pagination-link">1</a> 
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</li> 
</ul> 
</nav> 


接 下 来 添加 客户 组 件 。 
ng g component components/customers -m routing.module 


打开 customers.component.html 并 添加 自 定 义 HTML 代码 , 代码 和 上 
一 个 组 件 类 似 。 


(1) WE (ULE 10-4 ) 





1 1 Previous Next page 











10-4 
<h1 class="title ">Customers</h1> 


<nav class="Llevel"> 
<div class="Level-left"> 
<div class="Level-item"> 
<p class="subtitle is-5"> 
<strong>{{ (customers | filterBy: userFilter).length }} 
</strong> customers 
</p> 
</div> 


<p class="Level-item"> 
<a class="button is-success" (click)="add()">New</a> 
</p> 


<div class="Level-item is-hidden-tablet-only"> 
<div class="field has-addons"> 
<p class="control"> 
<input class="input" type="text" placeholder="Nameâ€ |" 
[(ngMode1L) J="userFilter.name"> 
</p> 
<p class="control"> 
<button class="button" (click)="userFilter.name = ''"> 
Clear 
</button> 
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</p> 
</div> 
</div> 
</div> 


<div class="Level-right"> 
<p class="Level-item" (click)="userFilter.hasOrders 
<a> 
<strong>All</strong> 
</a> 
</p> 
<p class="Level-item" (click)="userFilter.hasOrders 
<a>With orders</a> 
</p> 
<p class="Level-item" (click)="userFilter.hasOrders 
<a>Without orders</a> 
</p> 
</div> 
</nav> 


(2) 栅 格 


<table class="table is-hoverable is-fullwidth"> 
<thead> 
<tr> 
<th class="is-narrow"> 
<input type="checkbox"> 
</th> 
<th>Name</th> 
<th>Email</th> 
<th>Country</th> 
<th>Orders</th> 
<th>Actions</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<th class="is-narrow"> 
<input type="checkbox"> 
</th> 
<th>Name</th> 
<th>Email</th> 
<th>Country</th> 
<th>Orders</th> 
<th>Actions</th> 
</tr> 


true"> 


false"> 
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</tfoot> 
<tbody> 
<tr *ngFor="let customer of customers | filterBy: userFilter | 
orderBy: order"> 
<td> 
<input type="checkbox"> 
</td> 
<td> 
<a [routerLink]="['/customers-edit']" [queryParams ]="{id: 
customer.id }"> 
<strong>{{ customer.name }}</strong> 
</a> 
</td> 
<td> 
<code>{{ customer.email }}</code> 
</td> 
<td>{{ customer.country }}</td> 
<td> 
<a [routerLink]="['/orders']">{{ customer.orders }}</a> 
</td> 
<td> 
<div class="buttons"> 
<a class="button is-small" [routerLink]="['/customers- 
edit']" [queryParams]="{id: customer.id }">Edit</a> 
<a class="button is-smalL" (click)="delete()">Delete</a> 


</div> 
</td> 
</tr> 
</tbody> 
</table> 
(3) 分 页 


<nav class="pagination"> 
<a class="pagination-previous">Previous</a> 
<a class="pagination-next">Next page</a> 
<ul class="pagination-list"> 
<li> 
<a class="pagination-link">1</a> 
</li> 
<li> 
<span class="pagination-ellipsis 
</li> 
<li> 
<a class="pagination-link">1</a> 


>da€ | </span> 
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</li> 
</ul> 
</nav> 


接 下 来 创建 图 书 组 件 。 
ng g component components/books -m routing.module 


打开 books.components.html 并 编写 HTML 代码 ,如 下 代码 片段 只 适 
用 于 图 书页 面 。 


(1) SUE 
<hi class="title ">Books</h1> 


<nav class="LeveL"> 
<div class="Level-left"> 
<div class="Level-item"> 
<p class="subtitle is-5"> 
<strong>{{ (books | filterBy: userFilter).length }}</strong> 
books 
</p> 
</div> 


<p class="Level-item"> 
<a class="button is-success" (click)="add()">New</a> 
</p> 


<div class="level-item is-hidden-tablet-only"> 
<div class="field has-addons"> 
<p class="control"> 
<input class="input" type="text" placeholder="Book ti- 
tle..." [(ngModel) ]="userFilter.title"> 
</p> 
<p class="control"> 
<button class="button" (click)="userFilter.title = ''"> 
Clear 
</button> 
</p> 
</div> 
</div> 
</div> 


<div class="Level-right"> 
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<div class="Level-item"> 
Order by 
</div> 
<div class="Level-item"> 
<div class="select"> 
<select [(ngModel) ]="order"> 
<option value="title">Title</option> 
<option value="price">Price</option> 
<option value="pages">Page count</option> 


</select> 
</div> 
</div> 
</div> 
</nav> 
(2) Tile 


<div class="columns is-multiline"> 
<div class="column is-12-tablet is-6-desktop is-4-widescreen" 
*ngFor="Let book of books | filterBy: userFilter | orderBy: order"> 
<article class="box"> 
<div class="media"> 
<aside class="media-left"> 
<img src="assets/images/{{book.image}}" width="80"> 
</aside> 
<div class="media-content"> 
<p class="title is-5 is-spaced is-marginless"> 
<a [routerLink]="['/books-edit']" [queryPar- 
ams]="{id: book.id }">{{book.title}}</a> 
</p> 
<p class="subtitle is-marginless"> 
${{book.price}} 
</p> 
<div class="content is-small"> 
{{book.pages}} pages 
<br> ISBN: {{book. ISBN}} 
<br> 
<a [routerLink]="['/books-edit']" [queryPar- 
ams]J="{id: book.id }">Edit</a> 
<span>A- </span> 
<a>Delete</a> 
<p></p> 
</div> 
</div> 
</div> 
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</article> 
</div> 
</div> 


(3) 分 页 


<nav class="pagination"> 
<a class="pagination-previous">Previous</a> 
<a class="pagination-next">Next page</a> 
<ul class="pagination-list"> 
<li> 
<a class="pagination-link">1</a> 
</li> 
<li> 
<span class="pagination-ellipsis 
</li> 
<li> 
<a class="pagination-link">1</a> 
</li> 
</ul> 
</nav> 


>a€ | </span> 


10.4 “小结 


现在 应 用 就 已 经 完成 并 能 够 运行 了 ， 可 见 在 Angular 中 使 用 Bulma 
还 是 比较 简单 的 。 


第 11 章 将 介绍 如 何在 Vue.js 中 使 用 Bulma, 


第 11 章 


在 Vue.js 中 使 用 Bulma 


本 章 将 使 用 Vue.js 来 开发 Dashboard 页 面 ,教程 是 关于 如 何在 Vue.js 
中 使 用 Bulma 的 ， 而 不 是 如 何 使 用 Vue.js。 


如 果 想 深入 学 习 Vue.js， 可 以 访问 其 官网 ， 那 里 提供 了 简洁 易 读 的 
高 质量 文档 。 


11.1 安装 vue-cli 


本 章 将 会 用 到 Vue.js 的 命令 行 工 具 vue-cli， 安 装 命令 如 下 : 


npm install -g vue-cli 

vue init <template> <project-name> 
cd <project-name> 

npm install 

npm run dev 


本 章 将 会 使 用 vue-ctLi 提供 的 webpack-simple 模板 来 创建 应 用 。 使 
用 vue-cli 新 建 应 用 时 记得 选择 webpack-simple 选项 。 使 用 vue-router 
来 实现 应 用 的 导航 跳 转 功能 。 路 由 对 每 一 个 应 用 程序 来 说 都 是 必 不 可 少 
的 ， 通 过 路 由 可 以 控制 父子 组 件 的 显示 演 染 。 
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ULAR: vue-cli 提供 了 6 种 可 用 的 应 用 模板 ， 可 以 访问 Vue CLI 
的 GitHub 存储 库 了 解 每 种 模板 的 功能 。 


在 正式 创建 应 用 之 前 ， 需 要 安装 如 下 依赖 ， 以 便 把 Bulma 与 Vue 
集成 。 
口 Node。 


QO) npm, 
ü Vue CLI. 





11.2 创建 Vue 应 用 程序 


首先 使 用 vue-cli 的 webpack-simple 模板 创建 一 个 应 用 ， 命 名 为 
bulma-dashboard. 


应 用 的 目录 结构 如 下 所 示 : 


口 bulma-dashboard [项 目 名 ] 
mnode modules 
国 STC/ 
> assets/ 
> App.vue 
> main.js 
m index.html 
m package.json 
m README.md 


m webpack.config.js 
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11.2.1 创建 页 面 


在 正式 使 用 vue-router 之 前 ， 首 先 创建 基本 的 页 面 骨 架 。 在 sre H 
录 下 创建 一 个 页 面 ， 然 后 创建 Dashboard.vue, Books.vue, Orders.vue 
和 Login.vue 组 件 。 使 用 的 编辑 器 最 好 支持 .vue 文件 的 快速 创建 , 如 果 不 
支持 ， 可 以 参考 如 下 代码 片段 : 

<template> 

</template> 

cript 

export default { 
name: [ INSERT NAME OF COMPONENT ] 

A 

<style> 

</style> 

说 明 : 如 果 使 用 了 sass-loader 预 处 理 器 并 采用 webpack 配置 ， 

需要 在 style 标签 上 加 上 Lang=''sass' ' 属 性 设置 。 


设置 [INSERT NAME OF COMPONENT] 名 称 ， 比 如 “Books”。 


11.2.2 vue-router 


下 面 将 vue-router 添加 到 项 目 中 。 引 入 vue-router 有 多 种 方式 , 如 
下 方式 可 在 引入 的 同时 保持 代码 结构 。 


O 安装 yue-router: 
npm install vue-router 


O 在 根 目录 中 创建 router/ 目 录 。 
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口 在 router/ 目 录 中 创建 indexjs 文件 。 
口 向 index.js 文件 中 引入 vue-router 和 用 到 的 组 件 : 





import VueRouter from 'vue-router' 


口 把 routes:{} 对 象 赋 给 新 建 的 路 由 实例 ，routes:{} 对 象 应 该 是 一 
组 包含 组 件 名 和 组 件 的 数组 。 

口 最 后 把 路 由 index.js 文件 引入 main.js 文件 中 ， 并 在 新 建 的 Vue 实 
例 中 引用 路 由 插件 。 





router/index.js 文件 类 似 于 如 下 代码 : 


import Vue from "vue"; 

import Router from "vue-router"; 

import Dashboard from "../pages/Dashboard.vue"; 
import /*... (剩余 页 ) */ 


Vue.use(Router ) ; 


export default new Router({ 
routes: [ 

{ 
path: "/", 
redirect: '/dashboard' 

is 

{ 
path: "/dashboard", 
name: "Dashboard", 
component: Dashboard, 


/*... (剩余 页 ) */ 
l; 
linkActiveClass: 'is-active' /* Bulma 的 导航 链接 激活 */ 
}); 


mainjs 文件 类 似 于 如 下 代码 : 
import Vue from "vue"; 


import App from "./App.vue"; 
import router from "./router"; 
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/* 其 他 事项 * 


~ 


new Vue({ 

el: "#app", 

router, 

render: h => h(App), 
H; 


这 就 是 路 由 的 简单 用 法 ， 更 多 用 法 可 参考 Vue Router 官方 文档 。 
执行 如 下 命令 运行 应 用 程序 : 


npm run dev 


11.3 安装 Bulma 


可 以 通过 CDN (使 用 <Link> 标 签 ) 或 npm 包 把 Bulma 的 最 新 版 本 
安装 到 Vue 项 目 中 。 


11.3.1 方法 一 : CDN 引 入 


如 果 不 需 要 定制 Bulma， 可 以 通过 <link> 标签 引入 Bulma, 打开 
index.html 文件 并 在 其 <head> 标 签 中 添加 Bulma CDN 引入 标签 。 


<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/ 
bulma.min.css" rel="stylesheet"> 


11.3.2 方法 二 : npm 包 引入 ( 推荐 ) 


开发 单 页 应 用 程序 时 ， 推 荐 使 用 npm 引入 第 三 方 库 。 使 用 vue-cli 
创建 应 用 程序 的 同时 会 安装 并 配置 好 webpack。 使 用 npm 添加 Bulma 会 
引入 CSS 框架 并 把 它 打 包 到 buildjs 中 。 
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1. 使 用 npm 安装 Bluma 
npm install bulma --save 
在 main.js 中 引入 Bulma: 


import './../node_modules/bulma/css/bulma.css'; 


使 用 npm 将 Bulma 引入 项 目 中 非常 简便 。 如 果 想 定制 Bulma， 需 要 
在 src/assets/ 下 创建 styles.css 样式 文件 ， 引 入 Bulma 的 初始 变量 和 函数 ， 
然后 编写 定制 功能 ， 最 后 引入 main.js 即 可 。 


@import '../../node_modules/bulma/sass/utilities/initial-variables'; 
@import '../../node_modules/bulma/sass/utilities/functions'; 


Sprimary: #ffb3b3; /* 主 色调 改 为 粉色 */ 

@import '../../node_modules/bulma/bulma' ; 

然后 把 main.js 中 的 引入 改 为 自 定 义 样 式 文件 。 
import router from "./router"; 


import './assets/custom.scss'; 
2. 给 Bluma 创建 别名 


使 用 npm 安装 Bulma 后 ,可 以 通过 ES6 语法 的 引入 语句 引入 Bulma, 
但 是 需要 使 用 相对 路 径 ， 可 以 在 webpack 中 给 Bulma 设置 一 个 别名 以 方 
便 引 入 。 


打开 build/webpack.dev.confjs 文件 并 添加 如 下 代码 : 


resolve: { 
extensions: ['.css'], 
alias: { 
"bulma': resolve('node_modules/bulma/css/bulma.css'), 
} 
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创建 好 别名 后 ， 就 可 以 通过 如 下 方式 引入 Bulma T : 
import 'bulma'; 


说 明 : npm 生态 系统 中 有 几 个 Vue+Bulma 的 包 可 以 直接 下 载 使 
用 ， 不 过 它们 各 有 长 短 。 


11.3.3 ”使 用 Font-Awesome 字 体 
可 以 通过 CDN 引入 Font-Awesome 字体 。 


打开 index.html 文件 并 添加 如 下 代码 : 


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css"> 


项 目 最 终 的 目录 结构 如 下 所 示 : 


T bulma-dashboard [项 目 名 ] 
m node_modules 
m src/ 
> assets/ 
4 images/ 
® styles.css 
4 logo.png 
> pages 
4 Books.vue 
® Customers.vue 
4 Dashboard.vue 
4 Login.vue 


® Orders.vue 


114 | 第 11 章 € Vue js 中 使 用 Bulma 





> router 
4 Index.js 
> App.vue 
> main.js 
m index.html 
m package.json 
m README.md 


m webpack.config.js 


接 下 来 将 之 前 编写 的 页 面 HTML 代码 应 用 于 新 建 的 Vue 项 目 中 。 


11.4 Vue 组 件 


说 明 : 取决 于 对 Vue 的 掌握 程度 以 及 前 面 编写 的 示例 ， 可 选择 
跳 到 下 一 部 分 。 本 章 解释 如 何 实现 Bulma 的 更 多 功能 。 下 面 展 
示 的 代码 片段 可 能 不 完整 ， 完 整 示例 见 随 书 代码 。 


前 面 介 绍 了 Vue Router 以 及 通过 npm 安装 Bulma， 接 下 来 把 前 面 编 


写 的 代码 移植 到 .vue 文件 中 。 首 先 编写 App.vue， 然 后 在 pages 文件 夹 中 
创建 组 件 ， 最 后 编写 一 些 更 复杂 的 交互 组 件 。 


11.5 ”管理 页 面 骨架 


首先 将 /html/dashboard.html/ 的 部 分 代码 移植 到 App.vue 中 。 需 要 说 
明 的 是 , App.vue 文件 中 不 会 有 页 面 的 内 容 代 码 , 我 们 会 将 每 个 页 面 的 内 
容 代 码 拆 分 到 单独 的 组 件 文件 中 。 








15 “管理 页 面 骨 架 











<div id="app"> 
<nav class="navbar has-shadow"> 
<div class="navbar-brand"> 
<a class="navbar-item" href="#"> 
<img src="logo.png" alt="Bleeding Edge Press"> 


</a> 
<div class="navbar-burger burger"> 
<span></span> 
<span></span> 
<span></span> 
</div> 
</div> 


<div class="navbar-menu"> 
<div class="navbar-start"> 
<div class="navbar-item"> 
<small>Publishing at the speed of technology</small> 
</div> 
</div> 
<div class="navbar-end"> 
<div class="navbar-item has-dropdown is-hoverable"> 
<div class="navbar-link"> 
John Doe 
</div> 
<div class="navbar -dropdown"> 
<a class="navbar-item"> 
<span class="icon is-smalL"> 
<i class="fa fa-user-circle-o"></i> 
</span> Profile 
</a> 
<a class="navbar-item"> 
<span class="icon is-small"> 
<i class="fa fa-bug"></i> 
</span> Report bug 
</a> 
<a class="navbar-item"> 
<span class="icon is-small"> 
<i class="fa fa-sign-out"></i> 
</span> Sign Out 
</a> 
</div> 
</div> 
</div> 
</div> 
</nav> 


<section class="section"> 
<div class="columns"> 
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<div class="column is-4-tablet is-3-desktop is-2-widescreen"> 
<aside class="menu"> 
<p class="menu-label">Menu</p> 
<ul class="menu-list"> 
<li> 
<router-link to="/dashboard"> 
<span class="icon "> 
<i class="fa fa-tachometer"></i> 
</span>Dashboard</router-link> 
</li> 
<li> 
<router-lLink to="/books"> 
<span class="icon"> 
<i class="fa fa-book"></i> 
</span> Books 
</router-link> 
</li> 
<li> 
<router-link to="/customers"> 
<span class="icon"> 
<i class="fa fa-address-book"></i> 
</span> Customers 
</router-link> 
</li> 
<li> 
<router-link to="/orders"> 
<span class="icon"> 
<i class="fa fa-file-text-o"></i> 
</span> 
Orders 
</router-link> 
</li> 
</ul> 
</aside> 
</div> 
<main class="column"> 
<router -view></router-view> 
</main> 
</div> 
</section> 
</div> 


下 面 看 看 以 上 代码 片段 和 之 前 编写 的 HTML 版 本 有 何 区 别 。 可 以 看 
到 ， 这 里 使 用 了 <router-Ltnk> 和 <router-view> 两 组 标签 ， 这 是 vue-router 
要 用 到 的 ， 指 定 不 同 的 路 由 地 址 会 泻 染 不 同 的 组 件 内 容 ， 从 而 实现 一 个 
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单 页 应 用 程序 。 


<router-Link></router-Link> 标 签 最 终 会 泻 染 为 <a href="#"></a> 
标签 ， 其 中 的 to 属性 值 则 是 之 前 在 router/index.js 中 定义 的 路 径 变量 。 


routes: [ 


{ 
path: "/dashboard", 
name: "Dashboard", 
component: Dashboard, 


Foss 


ya 


<router-view></router-view> 标 签 实际 泻 染 的 时 候 会 替换 为 当前 
路 由 所 对 应 的 要 泻 染 的 组 件 视图 ， 所 以 当 用 户 登 录 后 ，<router-view> 
</router-view> 标 签 就 会 被 Dashboard. vue 组 件 内 容 所 替代 。 





11.6 ”实现 Dashboard 


项 目 结构 中 应 该 有 一 个 pages/ 目 录 ， 其 下 有 一 个 空 的 dashboard.vue 
文件 ， 最 终 会 把 之 前 编写 的 Dashboard 的 HTML 代码 移植 过 来 。 





首先 编写 Dashboard 的 顶部 区 域 ， 包 括 用 户 登 录 信 息 展示 以 及 下 拉 
单 。 


<div class="level"> 
<div class="level-left"> 
<h1 class="subtitle is-3"> 
<span class="has-text-grey-light">Hello</span> 
<strong>Alex Johnson</strong> 
</hi> 
</div> 
<div class="Level-right"> 
<div class="select"> 
<select @change="changeStats"> 
<option value="today" selected>Today</option> 
<option value="yesterday">Yesterday</option> 
<option value="week">This Week</option> 
<option value="month">This Month</option> 


a 
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<option value="year">This Year</option> 
<option value="alltime">ALL time</option> 
</select> 
</div> 
</div> 
</div> 


除了 在 <select> 标 签 中 添加 了 @change="changeStats" 属 性 外 ， 和 之 
前 的 HTML 版 本 没有 任何 区 别 。 添 加 的 代码 是 Vue 用 于 监听 选择 框 变动 
的 ， 如 果 选 择 框 发 生变 动 ，changeSTats() 方 法 就 会 执行 并 获取 最 新 状态 
用 于 展示 。 


下 面 实现 统计 部 分 和 数据 对 象 ， 以 便 更 改 统计 数据 。 


<div class="columns is-multiline"> 
<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-link has-text"> 
<p class="title is-1">{{ selectedStats.orders }}</p> 
<p class="subtitle is-4">0rders</p> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-info has-text"> 
<p class="title is-1">${{ selectedStats.revenue }}</p> 
<p class="subtitle is-4">Revenue</p> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-primary has-text"> 
<p class="title is-1">{{ selectedStats.visitors }}</p> 
<p class="subtitle is-4">Visitors</p> 
</div> 
</div> 


<div class="column is-12-tablet is-6-desktop is-3-widescreen"> 
<div class="notification is-success has-text"> 
<p class="title is-1">{{ selectedStats.pageviews }}</p> 
<p class="subtitle is-4">Pageviews</p> 
</div> 
</div> 
</div> 
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这 里 用 到 了 Vue 的 模板 语法 {{ selectedStats. revenue }} , WER “Z 


符 串 内 插 ”。 双 括号 内 的 文本 是 数据 对 象 的 变量 。 将 下 面 的 数据 对 象 添加 
到 data() {方法 中 。 


export default { 
name: 'Dashboard', 
data() { 
return { 
stats: { 
today: { 
orders: "232", 
revenue: "7,648", 
visitors: "1,678", 
pageviews: "20,756" 
}, 
yesterday: { 
orders: "200", 
revenue: "5,465", 
visitors: "1,400", 
pageviews: "18,556" 


}, 

week: {...}, 
month: {...}, 
allTime: {...} 


} 
} 
} 
} 


现在 有 了 用 于 统计 的 数据 和 代码 , 下 面 实现 changestats() 方 法 来 处 


理 变化 , 在 data() 方 法 下 添加 如 下 代码 , 在 页 面 加 载 完 后 更 新 统计 数据 。 


mounted: function(){ 
this.selectedStats = this.stats.today; 
Yy 
methods: { 
changeStats(event) { 
this.selectedStats = this.stats[event.target.value]; 
} 
} 


最 后 看 看 最 新 订单 ， 包 含 最 新 订单 列表 ， 每 条 订单 包含 订单 id, H 
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期 、 客 户 、 价 格 和 订单 状态 。 订 单 状 态 采 用 Bulma 的 .tag 类 和 修饰 符 类 
来 突显 状态 。 


是 ， 


说 明 : Bulma 的 修饰 符 类 以 is- 或 者 has- 开 头 。 


最 新 订单 的 实现 代码 如 下 : 


<div class="column is-12-tablet is-6-desktop is-4-fullhd"> 
<div class="card"> 
<div class="card-content"> 
<h2 class="title is-4">Latest orders</h2> 


<template v-for="(order, key) in orders"> 
<div class="Level" :key="order.id"> 
<div class="Level-left"> 
<div> 
<p class="title is-5 is-marginless"> 
<router-link to="/edit-order">{{ order.id }}</router-link> 
</p> 
<small>{{ order.date }} by <router-link to="/edit- 
customer">{{ order.purchasedBy }}</router-link></small> 
</div> 
</div> 
<div class="Level-right"> 
<div class="has-text-right"> 
<p class="title is-5 is-marginless">${{ order.price }}</p> 
<span class="tag" :class="order.status.class">{{ order.sta- 
tus.label }}</span> 
</div> 
</div> 
</div> 
</template> 
<router-Link class="button is- link is-outlined" to="/orders">View all 
orders</router-link> 
</div> 
</div> 
</div> 


Vue 遍历 了 订单 列表 数组 并 展示 每 一 条 订单 数据 ， 需 要 注意 的 


:class 属性 是 Vue 的 特殊 属性 , 可 用 于 绑 定 数据 从 而 控制 元 素 的 类 。 


在 以 上 代码 中 ， 用 它 绑 定 了 订单 状态 元 素 的 类 。 这 是 什么 意思 呢 ? 看 一 
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个 简单 的 订单 数据 示例 。 


说 明 : :是 v-bind: 的 缩写 ， 所 以 :class= 和 v-bind:class= 4% 
同 的 。 


orders: [ 
{ 

id: 787352, 

date: "Nov 18, 17:38", 

purchasedBy: "John Miller", 

price: "56.98", 

status: { 
label: "In Progress", 
class: "is-warning" 


id: 

status: { 
label: "Successful", 
class: "is-success" 


可 以 看 到 第 1 条 订单 具有 一 个 表示 状态 的 类 is-warning, $ 2 条 订 
单 的 类 是 is-success， 所 以 这 里 统一 使 用 <span> 标 签 来 显示 状态 并 添 
加 .tag 类 。 每 条 订单 的 状态 不 同 ，Vue 使 用 :ctass= 语 法 来 给 每 条 订单 绑 
定 对 应 的 状态 值 。 


说 明 : 更 多 相关 信息 ， 可 参考 Vue 循环 列表 。 
11.7 登录 页 面 


下 面 将 之 前 编写 的 login.html 的 代码 转换 成 一 个 Vue 组 件 或 者 说 页 
Ho XF Vue 来 说 ， 页 面 其 实 是 组 件 的 一 种 形式 。 
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打开 login.html 文件 ， 复 制 <body><body> 标 签 间 的 内 容 到 login.vue 
的 <template><template> 标 签 间 。 如 果 现 在 将 Vue 应 用 的 路 由 导航 到 登录 
页 面 , 可 以 看 到 和 之 前 的 login.html 相同 的 视觉 效果 , 下 面 实现 更 多 交互 
效果 。 


现在 项 部 导航 栏 和 侧 边 栏 是 可 见 的 ， 这 是 不 应 该 的 ， 这 里 是 出 于 教 
学 目的 而 把 App.vue 用 作 页 面 的 基本 骨架 。 这 个 问题 易于 修复 ， 但 是 在 
实际 项 目 中 不 应 这 么 用 。 可 以 使 用 一 个 <template> 标 签 把 <nav> 和 
<section> 包 起 来 ,然后 检查 是 否 处 于 登录 页 面 从 而 决定 是 否 显示 。 可 以 
通过 this.$router.name 变量 来 判断 当前 所 处 页 面 。 





<template v-if="Sroute.name !== 'Login'"> 
<nav> 
<! - -导航 代码 --> 
</nav> 
<section> 
<!-- 主 内 容 --> 
</section> 
</template> 
<div v-else><router-view/></div> 


TAR: 出 于 测试 目的 ，<nav> 和 <section> 并 没有 实际 内 容 。 





如 果 要 测试 登录 页 面 ， 最 好 包含 完整 的 代码 。 


下 面 正式 创建 登录 页 面 , 首先 创建 登录 页 面 的 数据 对 象 , 如 下 所 示 ， 
它 包含 登 录 页 面 的 表单 数据 和 错误 数据 以 便 展 示 错 误 。 


data() { 
return { 

form: { 
email: "", 
password: "" 

+3 

error: { 
email: false, 
password: false 
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} 
} 
J 


接 下 来 将 这 些 数 据 和 <tempLate> 中 的 元 素 绑 定 。 对 于 input 标签 , 可 
以 使 用 v-model = 指令 将 input 值 和 数据 对 象 缚 定 ， 所 以 这 里 加 上 代码 
v-modeL="form.emaiL" 和 v-modeL="form.password"。 对 于 错误 , 提示 错误 
信息 并 将 input 标签 的 边框 变 为 红色 ， 可 以 使 用 Bulma 的 修饰 符 类 
is-danger 来 处 理 ， 也 可 以 添加 一 个 辅助 元 素 结合 .help 类 给 出 帮助 ， 或 
以 红色 文本 展示 错误 信息 。 

在 <div class="control"> 之 后 添加 错误 信息 提示 内 容 ， 如 下 所 示 : 

<p class="help is-danger" v-if="error.email">Oops! Can't find user.</p> 

然后 给 密码 输入 框 也 加 一 个 。 使 用 Vue 的 :ctass= 来 绑 定 数据 控制 
类 is-danger 的 变更 ， 形 式 为 :class="{'some-class': someVariable}". 


对 两 个 输入 框 分 别 添加 代码 :class="{'is-danger': error.email}" 和 


:class="{'is-danger': error.password}"。 


剩 下 的 问题 就 是 提交 并 校 验 数据 了 。 简 单 起 见 ， 这 里 不 会 使 用 实际 
的 服务 器 ， 如 果 想 用 当然 也 可 以 。 给 提交 按钮 添加 事件 处 理 器 @cLick 
prevent="tryLogin" 并 在 <script> 中 添加 新 的 methods 对 象 和 tryLogin() 
方法 : 

methods: { 


tryLogin(){ 


} 
} 


tryLogin() 困 数 功能 如 下 : 


(1) 校 验 密码 和 邮箱 的 合法 性 ; 
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(2) 如 有 错误 ， 提 示 错 误 信息 ; 
(3) 重 置 错误 ; 
(4) 登录 成 功 后 跳 转 到 Dashboard 页 面 。 


没有 什么 复杂 之 处 ，Bulma 的 一 些 类 在 其 中 发 挥 作用 。 实 现代 码 如 下 : 


tryLogin() { 
this.resetErrors(); 


if(this.form.email !== 'user@bulma.com'){ return this.error.email = true; } 
if(this.form.password !== 'password'){ return this.error.password = true; } 


this.resetErrors(); 
this.Srouter.push('dashboard'); 
Js 
resetErrors(){ 
this.error.email = false; 
this.error.password = false; 


} 
说 明 : 将 在 if 检查 之 前 和 之 后 重 置 错误 ,因为 不 希望 在 验证 过 
字段 后 出 现任 何 错 误 消息 提示 。 


这 部 分 讲解 基本 涵盖 了 登录 组 件 ， 展 示 了 如 何在 表单 上 显示 错误 消 
息 ， 以 及 如 何在 元 素 上 更 改 类 以 突显 输入 字段 中 的 错误 。 





` 


11.8 创建 问题 报告 组 件 


本 章 将 重新 构建 问题 报告 模 态 框 的 功能 。 可 以 从 项 栏 右上 角 的 用 户 
菜单 访问 该 模 态 框 。 该 模 态 框 将 包含 一 个 简单 的 文本 输入 框 ， 如 果 虚 拟 
请 求 成 功 完成 ， 将 显示 一 条 成 功 通知 。 


将 要 实现 如 下 内 容 : 


口 创建 BugReport 组 件 ; 
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口 将 组 件 导 入 App.vue 文件 ; 
口 添加 模 态 框 的 HTML; 
口 添加 Vue 特性 。 





11.8.1 创建 组 件 


首先 创建 新 的 组 件 。 在 components 文件 夹 中 创建 BugReportvue X 
件 ， 从 以 下 代码 片段 开始 : 


<template> 
</template> 


<script> 
export default { 
name: "BugReport" 


i 


</script> 
<style> 


</style> 


可 以 直接 从 Bulma 文 档 中 复制 模 态 框 的 代码 ,并 将 其 插入 <template> 
</template> 标 签 之 间 。 在 .modal-card-title 标签 中 , 添加 一 个 美观 的 标 
fl, .modal-card-body 中 放置 了 input 组 件 和 通知 提醒 组 件 。 


<div class="notification is-success" :class="{'is-hidden': hideNotifica- 
tion}"> 
<p> 
<span class="icon"><i class="fa fa-bug"></i></span> 
Thanks. Your bug has been reported. 
</p> 
<p>We will do our best to fix it as soon as possible</p> 
</div> 


<p class="help" :class="{'is-hidden': hideNotification}">The following 
message was sent</p> 

<textarea class="textarea" placeholder="Let us know what problems you 
faced." :disabled="!hideNotification" v-model="reportMessage"></textarea> 
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解释 一 下 其 中 要 点 。 通知 提醒 使 用 了 Vue 的 类 属性 绑 定 语法 :class=""， 
前 面 讨论 过 这 一 点 。 如 果 变 量 hideNotification 为 true， 则 设置 通知 包装 
器 中 的 类 .is-hidden, 以 及 <text-area> 上 方 的 帮助 文本 。 同 理 ，textarea 
也 使 用 该 变量 , 但 其 作用 相反 。 因 此 ， 当 hidenotification X false HF, 
即 假设 发 送 了 错误 报告 ， 并 且 显 示 成 功 通知 ， 这 种 情况 下 将 显示 帮助 文 
本 ,并 禁用 textarea， 因 此 用 户 将 无 法 键入 任何 新 文本 。 


最 后 一 点 ，textarea 有 一 个 v-model 用 于 绑 定 数据 ， 因 此 可 以 从 数 
据 对 象 中 获取 文本 ， 并 将 其 传 到 任何 需要 的 地 方 。 


下 面 创建 问题 报告 组 件 所 需 的 数据 对 象 。 


export default { 
name: "BugReport", 
data() { 
return { 
reportMessage: "" 
hideNotification: true, 
} 
} 
} 


由 于 该 组 件 将 被 其 他 组 件 引 用 , 因此 “ 父 ” 组 件 将 负责 打开 模 态 框 。 
如 前 所 述 ，Bulma 模 态 框 是 通过 切换 .is-active 修饰 符 类 来 显示 的 ， 
此 可 以 通过 从 父 组 件 向 子 组 件 传递 属性 来 实现 此 目的 ， 如 果 该 属性 为 
true， 就 切换 is-active 类 。 首 先 修改 <script> 以 注册 传 入 的 props。 


export default { 
name: "BugReport", 
props: { 
showModal: { 
type: Boolean, 
default: false 
} 
}, 
data() { 
return { 
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reportMessage: "" 
hideNotification: true, 
} 
}, 
} 


然后 使 用 与 前 面相 同 的 类 属性 绑 定 来 切换 modal 包装 器 上 的 .is- 
active 类 。 

<div class="modal" :class="{'is-active': showModal}"> 

<!-- 模 态 框 代码 --> 

</div> 

现在 可 以 打开 并 显示 模 态 框 了 ， 当 然 ， 还 需要 确保 可 以 将 其 关闭 或 
取消 。 

关闭 模 态 有 3 种 方法 : 
口 点 击 模 态 框 外 的 区 域 (上 暗 背 景 ); 
口 点 击 关闭 图 标 ; 
O 提交 或 取消 问题 报告 。 








为 了 避免 重复 编码 ， 需 要 创建 一 个 closeModal 方法 ,该 方法 将 负责 
关闭 模 态 框 。 现 在 ， 无 论 选 择 哪 种 关闭 方式 ， 调 用 closeModal() 方 法 都 
能 轻松 完成 。 


需要 让 父 组 件 知道 模 态 框 要 被 关闭 ， 因 此 需要 把 showModal 的 属性 
从 true 改 为 faLse。 从 子 级 到 父 级 的 通信 是 通过 Vue 中 的 事件 完成 的 ， 
由 此 得 出 以 下 closeModal() 方 法 ， 只 和 需 $emit 一 个 由 父 组 件 处 理 的 close 
事件 即 可 。 


closeModal() { 
this.Semit('close'); 


} 
关闭 模 态 框 的 第 一 种 方法 是 以 相同 的 方式 实现 的 ， 只 需 在 .modal- 
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background 元 素 和 .delete 按钮 上 添加 一 个 @click="closeModal" 处 理 函 
数 即 可 。 


说 明 : at 符号 @ 是 v-on: 的 简写 ， 所 以 上 面 的 点 击 事件 可 以 写成 


v-on:click="closeModal", 


对 于 “取消 ”和 “提交 ”按钮 ， 需 要 创建 用 于 发 送 错误 报告 和 重 置 
文本 域 的 新 图 数 。 可 以 从 resetModal() 方 法 开始 ， 因 为 sendReport() 方 
法 也 将 使 用 它 。 


resetModal() { 
this.reportMessage = 
this.closeModal(); 
Fs 


首先 将 reportMessage 变量 设置 为 空 字符 串 ， 然 后 调用 前 面 的 
closeModal() 方 法 。 至 于 第 二 种 方法 ， 按 如 下 方式 发 送 错误 报告 。 





sendReport() { 
/* 发 送 某 个 ajax 请 求 并 保存 数据 。 */ 
this.hideNotification = false 


setTimeout(() => { 
this. hideNotification = true; 
this.resetModal(); 
}, 4000); 
}, 


以 上 代码 将 hideNotification 状态 变 为 false， 这 样 通知 提醒 就 会 
显现 ,为 了 使 其 更 具 交 互 性 , 将 其 放 入 setTimeout() 并 设置 延迟 为 4 秒 ， 
再 次 隐藏 通知 ， 并 调用 resetModal() 方 法 。 


最 后 给 按钮 添加 点 击 事件 。 


<button class="button is-text" @click="resetModal">Cancel</button> 
<button class="button is-success" @click="sendReport">Send</button> 


这 样 就 完成 模 态 框 了 ! 
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11.8.2 ”将 模 态 框 添加 到 App 模 板 


模 态 框 已 经 完成 ， 可 以 通过 项 栏 的 用 户 菜单 中 使 其 生效 。 切 换 到 
App.vue 文 件 ， 导 入 新 组 件 并 将 其 添加 到 components 对 象 中 。 


import BugReport from './components/BugReport.vue'; 


export default { 
name: ‘app', 
components: { BugReport }, 
data: function() { 
return { 
openBugReport: false 
} 
} 
J 


然后 将 组 件 添加 到 HTML 模板 的 底部 ， 最 后 一 个 </div> 之 上 。 


<report-bug :showModal="openBugReport" v-on:close="openBugReport = false"></ 
report-bug> 
以 上 代码 是 将 openBugReport 的 值 传 递 给 :showModal 属性 。 应 该 在 
BugReport 组 件 中 检查 该 属性 。 代码 还 应 该 监听 之 前 从 closeModal() 方 法 
抛 出 的 close 事件 。 发 生 这 种 情况 时 , 应 用 程序 把 openBugReport 设置 为 
false， 关 闭 模 态 框 。 


最 后 , 给 “Report Bug” 链 接 添加 一 个 点 击 事件 处 理 器 。 在 usermenu 
中 更 改 下 面 这 上段 代码 。 


<a class="navbar-item"> 
<span class="icon is-small"> 
<i class="fa fa-bug"></i> 
</span> Report bug 
</a> 


修改 后 的 代码 如 下 所 示 : 
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<a class="navbar-item" @click="openBugReport = true"> 
<span class="icon is-small"> 
<i class="fa fa-bug"></i> 
</span> Report bug 
</a> 


可 以 将 collect.js 包 添 加 到 项 目 中 ， 以 便 轻 松 使 用 数组 和 对 象 。 


11.9 图 书页 面 


关于 Home.vue 页 面 ， 有 一 些 准备 工作 要 做 ， 是 针对 Books.vue FURI 
余 列 表 页 面 的 。 希 望 你 已 经 成 功 地 为 本 页 面 的 图 书 创建 了 “数据 对 象 ”， 
以 下 是 一 个 小 的 代码 示例 。 完 整 代码 见 本 书 的 GitHub 存储 库 。 


data() { 
return { 
books: [ 
{ 

name: "TensorFlow For Machine Intelligence", 
price: "$22.99", 
PpageCount: 270, 
ISBN: "9781939902351", 
coverImage: "../assets/images/tensorflow. jpg", 
publishDate: 2017, 


name: "Docker in Production", 
price: "$22.99", 
PpageCount: 156, 
ISBN: "9781939902184", 
coverImage: "../assets/images/docker.jpg", 
publishDate: 2015, 
J 
J; 
allBooks: [] 
} 
} 


图 书页 面 有 一 些 简单 的 功能 ， 用 于 过 滤 和 排序 页 面 上 的 图 书 。 简 单 
起 见 ， 数 据 对 象 中 有 两 个 图 书 数 组 : books 和 allBooks ， 后 者 是 页 面 加 载 
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时 开始 使 用 的 原始 图 书 数组 。 


接 下 来 把 collectjs 包 添 加 到 项 目 中 ， 以 便 轻 松 使 用 数组 和 对 象 。 如 
果 使 用 过 Laravel PHP 框架 ,会 对 这 个 包 非 常熟 悉 。 它 几乎 和 Laravel 集 
合 一 模 一 样 ， 只 是 换 成 了 JavaScript 版 本 。 


11.9.1 图 书 排序 


对 图 书 进行 排序 非常 容易 ， 首 先导 入 collectjs 包 ， 放 置 在 <script> 

import Collect from "collect.js"; 

当下 拉 菜 单 中 发 生 更 改 时 , 需要 设法 保持 标签 页 。 使 用 Vue 框架 时 , 
在 HTML 中 添加 事件 监听 器 很 容易 ， 可 以 使 用 v-on:event="" 属 性 ， 也 
可 以 使 用 缩写 : @event=""。 


因此 ， 将 select 元 素 改 为 如 下 代码 片段 : 


<select @change="sortBooks"> 
<option value="publishDate">Publish date</option> 
<option value="price">Price</option> 
<option value="pageCount">Page count</option> 
</select> 


注意 ， 以 上 代码 还 为 所 有 选项 添加 了 显 式 的 值 属性 。 


下 一 步 是 创建 sortBooks 方法 并 对 图 书 进行 排序 。 在 方法 内 部 使 用 
collect.js 和 sortBy(key) 方 法 ， 它 们 会 按照 给 定 的 键 对 集合 进行 排序 。 


首先 , 将 选 定 的 options 值 保存 到 一 个 新 变量 中 : Let selectValue = 


String(event.target.value);. 


然后 ， 将 books 数组 转换 为 一 个 集合 ， 这 样 collectjs 包 就 可 以 对 对 





132 | #118 Vue js 中 使 用 Bulma 





象 发 挥 作用 了 ， 然 后 用 已 排序 的 图 书 创建 一 个 新 集合 ， 最 后 将 其 设置 为 
图 书 数组 。 完 整 的 sortBooks 方法 如 下 : 


sortBooks(event) { 
let selectValue = String(event.target.value); 
let collection = Collect(this. books); 
let sortedBooks = collection.sortBy(selectValue) ; 


this.books = Object.assign([], sortedBooks.all()); 
Jy 


11.9.2 ”过 滤 图 书 
前 面 实现 了 排序 ， 下 面 看 看 实现 龟 选 搜索 功能 是 否 同样 简单 。 





这 甚至 比 前 面 的 排序 还 要 简单 。 首 先 给 Search 按钮 和 <input> 字段 
添加 事件 处 理 器 ， 它 将 在 按键 释放 (keyup ) 时 触发 ， 使 其 行为 更 即时 。 
<input> 字 段 还 需要 一 个 v-model 属性 来 绑 定 数据 。 


<p class="control"> 
<input class="input" type="text" placeholder="Book name, ISBN..." 
v-model="SearchWord" v-on:keyup="searchBooks"> 
</p> 
<p class="control"> 
<button class="button" @click="searchBooks">Search</button> 


</p> 

点 击 搜索 按钮 和 释放 按键 将 触发 相同 的 方法 ， 即 进行 筛选 。 这 里 
要 记 住 一 点 ， 该 方法 将 改变 searchWord 和 bookname 的 大 小 写 ， 这 样 
filtersearch 将 不 怎么 区 分 大 小 写 。 除 此 之 外 ， 它 还 将 通过 JavaScript 原生 
方法 filter() 处 理 books 数组 并 返回 图 书 ， 其 中 书 名 将 包括 searchword 
方法 。 





searchBooks() { 
if (!this.searchWord) { 
this.books = Object.assign([], this.allBooks); 
} else { 














this.books = this.books.filter((book) => { 
return book.name.toLowerCase().includes(this.searchWord.toLowerCase()); 
p; 
} 
} 


此 外 ， 别 忘 了 将 searchword 添加 到 数据 对 象 。 


data() { 
coverImage: "../assets/images/gulp. jpg", 
publishDate: 2014, 
Fs 
]， 
searchWord: "", 
} 


11.9.3 创建 和 编辑 图 书 


图 书页 面 的 最 后 一 部 分 ， 是 创建 新 书 并 编辑 列表 中 的 图 书 。 同 样 ， 
设计 重点 是 Bulma 而 不 是 Vue.js， 下 面 简单 解释 如 何 实现 。 在 页 面 上 实 
现 一 个 模 态 框 , 该 模 态 框 将 打开 一 个 表单 ,以 便 用 户 可 以 添加 一 本 新 书 。 
该 模式 也 可 用 于 编辑 一 本 书 ， 对 此 不 再 袭 述 。 如 果 想 添加 这 个 功能 也 不 
妨 一 试 。 这 里 有 一 个 空 的 方法 和 一 些 说 明 帮 助 你 起 步 。 








1. 添加 新 书 


首先 , 应 该 从 Bulma 复制 Modalcard 代码 , 并 添加 到 <tempLate> 部 分 
最 后 一 个 闭合 </div> 之 前 。 在 <div class="modal-card-body"> 中 ， 从 
new-book.html 页 面 粘 贴 <form></form>。 这 样 就 准备 好 了 基本 的 HTML. 


首先 要 确保 可 以 打开 模 态 框 。 要 使 Bulma 模 态 框 可 见 ， 需 要 使 用 
is-acitve 修饰 符 类 , 而 不 是 一 直 显 示 。 使 用 Vue 显示 或 隐藏 该 模 态 框 主 
要 有 两 种 方法 。 第 一 种 方法 是 在 默认 情况 下 在 模 态 框 中 包含 is-active 
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类 ， 并 通过 切换 元 素 v-show="" 或 v-if="" 属 性 来 显示 或 隐藏 它 。 


对 于 这 里 ，v-if 方法 可 能 更 好 ， 因 为 设置 为 false 时 它 将 从 DOM 
中 移 除 标签 。 下 面 用 另 一 种 方法 来 切换 is-active 类 。 在 模 态 框 包装 器 
上 ， 将 代码 改 为 以 下 内 容 : 

<div class="modal" :class="{'is-active': showNewModal}"> 

以 上 代码 使 用 了 Vue 的 v-bind: 指 令 并 将 其 关联 到 类 属性 中 。 当 
showNewModal 为 true 时 ，is-active 类 被 添加 到 模 态 框 div 中 。 接 下 来 
在 数据 对 象 中 设置 showNewModal 变量 ， 默 认 值 为 false: showNewModal: 
false， 然 后 在 新 书 按钮 上 添加 一 个 点 击 事件 。 现 在 应 该 可 以 通过 点 击 
“New Book” 按 钮 打开 模 态 框 了 。 


<a class="button is-success" @click="showNewModal = true">New</a> 

这 里 存在 一 个 小 问题 一 一 无 法 关闭 模 态 框 ， 下 面 着 手 解决 。 在 模 态 
的 打开 标签 后 面 的 行 ( 模 态 组 件 的 黑色 背景 ) 上 ,应 该 有 一 个 类 为 .modal- 
background 的 div， 可 以 在 此 添加 第 二 个 点 击 事件 以 关闭 模 态 框 。 

做 法 如 下 : 


<div class="modal-background" @click="showNewModal = false"></div> 





目前 的 问题 是 , 它 不 能 清空 字段 。 应 该 使 用 一 个 resetNewBookForm() 
方法 来 符 代 。 下 面 即将 创建 该 方法 ， 先 将 代码 改 为 : 

<div class="modal-background" @click="resetNewBookForm"></div> 

在 methods: 对 象 中 创建 该 方法 ， 用 于 关闭 模 态 框 : 

resetNewBookForm() { 


this.showNewModal = false; 


} 
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fee waa, BUMS APR B FAEH v-model 获取 与 
数据 绑 定 的 值 。 创 建 一 个 新 的 空 数据 对 象 变量 book: {}o 


在 表单 的 每 个 <input> 元 素 上 , 添加 一 个 v-model="[input-variable]"， 
其 中 [input-variable] 对 应 图 书 对 象 的 title, price, pageCount 或 ISBN. 
对 于 publishDate 和 coverImages ,应 该 在 saveBook() 方 法 上 硬 编码 它们 ， 
本 书 不 讨论 上 传 。 


每 个 输入 框 都 应 该 类 似 于 : 


un 


<input class="input" type="number" placeholder="e.g. 22.99" value= 
required v-model="book.price"> 


在 表单 底部 ， 移 除 保存 按钮 和 清空 按钮 ， 代 之 以 模 态 框 上 的 按钮 。 
模 态 框 页 脚 的 完整 代码 如 下 : 


<footer class="modal-card-foot"> 
<button class="button is-success" type="button" 
@click="saveBook">Save Book</button> 
<button class="button" type="cancel">Cancel</button> 
</footer> 


接着 如 上 所 述 设置 静态 变量 ， 然 后 使 用 数组 push() 方 法 将 新 书 对 象 
添加 到 图 书 数组 中 。 重 复 使 用 ， 因 为 我 们 想 同 时 把 它 添加 到 “原始 ” 
书 数组 allBooks 和 当前 正在 查看 的 图 书 数组 books 中 。 


saveBook() { 
this.book.publishDate = "2017"; 
this.book.coverImage = "../assets/images/newbook. jpg"; 


this.allBooks.push(this. book); 
this .books.push(this. book); 


this. resetNewBookForm(); 


}, 
现在 如 果 尝 试 添加 一 本 新 书 ， 它 就 会 在 页 面 上 显示 。 
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2. BRAS 
要 移 除 图 书 ， 只 需 将 其 从 图 书 对 象 数 组 中 移 除 即 可 。 


首先 给 .delete 链接 添加 点 击 事件 。 需 要 传递 图 书 数组 索引 值 : 
<a @click="removeBook(index)'">Delete</a>, 然后 创建 removeBook() 方 
法 ,在 其 内 部 ， 只 需 通过 索引 剪接 books 数组 即 可 。 


removeBook(index) { 
this.books.splice(index, 1) 


}, 


说 明 : 在 一 个 成 熟 的 应 用 中 ， 应 该 将 模 态 框 提取 到 组 件 中 ， 以 
便 在 整个 应 用 中 复 用 ,例如 可 以 使 用 Vue 的 <sLot> 在 模 态 框 中 
切换 内 容 。 


11.10 小结 


本 章 介 绍 了 Bulma 与 Vue.js 的 集成 。 如 前 所 述 ， 随 书 代 码 中 有 一 些 
代码 片段 ， 可 以 由 此 开始 实现 图 书 编辑 表单 ， 也 可 以 创建 一 个 新 的 图 书 
编辑 页 面 ， 或 者 使 用 这 里 添加 新 书 时 所 使 用 的 模 态 框 。 


第 12 章 将 介绍 如 何在 React 中 使 用 Bulma。 


第 12 章 
在 React 中 使 用 Bulma 


本 章 将 把 Bulma 与 React 集成 在 一 起 。React 是 一 个 流行 的 JavaScript 
框架 ， 由 Facebook 为 创建 用 户 界面 而 设计 。 
阅读 本 章 的 前 提 和 条 件 : 对 JavaScript (ES6 )、React ( 或 React 


Native ), create-react-app (React CLI )、ReactRouter， 以 及 npm ( 本 章 会 
用 到 ) 或 Yarn ( Facebook 的 包 管 理 器 ) 有 基本 的 了 解 。 


12.1 本 章 目标 


本 章 将 为 Bleeding Edge 出 版 社 构建 一 个 具有 收藏 功能 的 浏览 器 。 用 
户 可 通过 电子 邮箱 和 密码 登录 该 应 用 ， 查 看 图 书 收藏 以 及 图 书 详情 。 





说 明 : 本 章 将 使 用 React 的 最 佳 实 践 和 最 佳 实践 命名 约定 。 本 
章 不 涉及 Redux 状态 管理 和 服务 器 端 渔 染 技巧 ， 而 是 关注 用 户 
界面 。 





总 而 言 之 ， 这 是 一 个 非常 简单 的 应 用 。 学 完 本 章 ， 你 将 掌握 如 何 正 
确 地 集成 Bulma 与 React， 并 能 利用 Bulma 库 创 建 应 用 的 用 户 界 面 。 
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12.2 ”安装 create-react-app 


React 与 Angular 和 Vue 非常 相似 , 也 有 自己 的 CLI， 称 为 create-react- 
app. 在 使 用 Bulma 创建 界面 之 前 , 需要 执行 儿 个 命令 来 启动 React 应 用 。 


npm install -g create-react-app 
create-react-app <project-name> 
cd <project-name> 

npm start 


上 述 命令 将 局 动 本 地 服务 器 ， 并 初始 化 React 应 用 。 


12.3 create-react-app 速 览 


create-react-app 已 经 完成 了 配置 开发 环境 的 所 有 艰苦 工作 ,我们 需要 
做 的 只 是 创建 组 件 和 样式 表 ( 若 有 )。 


本 章 将 把 所 有 组 件 及 其 子 组 件 保存 到 它们 自己 的 目录 中 。 


src/ 
- components/ 
- Login/ 
- Login. jsx 
- LoginForm. jsx 
- styles/ (#4) 
- Login.css 


Login. jsx 将 充当 容器 ， 其 中 榴 套 LoginForm.jsx。 通 过 这 种 方式 设 
置 组 件 ， 就 可 以 在 应 用 中 的 任何 位 置 移动 或 添加 登录 表单 了 。 
实用 结构 


需要 重 命名 一 些 文件 ， 并 为 资源 和 组 件 创建 目录 。 从 一 个 非常 高 的 
层面 来 看 ，src 文件 夹 中 的 目录 结构 应 该 类 似 于 : 
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src/ 
- assets/ 
- actions/ 
- components/ 
- ComponentName/ 
- ComponentName. jsx 
- ComponentNameChild. jsx 
- ComponentNameOtherChild. jsx 
- styles/ 
- ComponentName.css 
- App.css 
- App.js 
- App.test.js 
- index.js 
- index.css 
- registerServiceWorker. js 


12.4 安装 Bulma 


在 React 应 用 中 初始 化 Bulma 有 几 种 方法 。 可 以 把 它 添加 到 public/ 
目录 下 的 index.html 文件 中 , 也 可 以 通过 npm 添加 , 然后 使 用 ES6 导入 。 


说 明 : 建议 全 局 添加 Bulma， 以 便 一 次 引用 就 能 在 整个 应 用 中 
使 用 。 
12.4.1 选项 1: 通过 CDN 添 加 Bulma 


create-react-app 安装 完成 后 ， 执 行 npm start 局 动 该 应 用 ， 并 在 文本 
编辑 器 中 打开 文件 。 项 目 结构 中 包含 一 个 public/ 目 录 。 导 航 到 public/ A 
录 并 打开 index.html 文件 。 

可 以 选择 删除 预 泻 染 的 注释 ， 它 们 不 是 很 重要 。 


在 <head> 标 签 中 , 通过 CDN 添加 Bulma， 如 同 添 加 网 站 中 的 其 他 任 
何 样式 表 一 样 。 
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<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/ 
bulma.min.css" rel="stylesheet"> 


12.4.2 选项 2: 通过 npm 添 加 Bulma 
推荐 此 法 ， 因 为 使 用 JavaScript 导入 React 依赖 项 被 视 作 最 佳 实践 。 
create-react-app 安装 完成 后 ， 执 行 npm start 启动 该 应 用 ， 并 在 文本 
编辑 器 中 打开 文件 。 
通过 npm 安装 Bulma: 


npm install bulma --save 


在 src/ 主 目录 中 打开 index.js 文件 ， 并 添加 以 下 内 容 与 其 余 导 入 


语句 。 
import './../node_modules/bulma/css/bulma.css'; 


就 是 这 么 简单 ! 然后 就 可 以 在 ISX 中 使 用 Bulma 了 。 


12.5 使 用 React Router 4 编写 路 由 


这 个 示例 应 用 使 用 React Router 4， 因 此 可 以 基于 URL 访问 不 同 的 
泻 染 组 件 。 本 章 会 简要 介绍 React Router 4 的 基础 知识 , 但 强烈 建议 你 先 
查看 官方 文档 。 

首先 执行 如 下 命令 安装 React Router 4: 

npm install react-router-dom --save 


然后 导入 react-router-dom 的 两 个 特定 组 件 : BrowserRouter 和 
Route。 可 以 使 用 App.js 文件 中 的 ES6 导入 语句 来 实现 。 
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import { BrowserRouter, Route } from 'react-router-dom'; 


接 下 来 导入 要 创建 的 组 件 。 可 以 在 创建 后 再 导入 它们 ， 在 此 之 前 导 
入 的 话 会 出 错 。 当 准备 好 将 路 由 绑 定 到 组 件 时 ， 请 务必 参考 本 市 。 


12.5.1 <BrowserRouter> 


<BrowserRouter> 是 每 个 <Route> 的 包装 器 。 可 以 把 <BrowserRouter> 
看 作 一 个 组 件 ， 当 满足 某 个 条 件 时 〈 比 如 一 个 URL 地 址 )， 它 的 “ 子 ” 
组 件 就 会 被 注入 其 中 。 

与 其 他 所 有 组 件 一 样 ，<BrowserRouter> 需 要 一 个 根 元 素 。 如 果 尝 试 
在 其 中 直接 放置 多 个 路 由 ， 就 会 出 错 ， 因 此 需要 直接 在 里 面 使 用 <div>。 

此 时 的 ISX 应 该 如 下 所 示 : 


<BrowserRouter> 
<div> 
{/* 路 由 代码 */} 
</div> 
</BrowserRouter> 


12.5.2 <Route> 


在 这 个 单 <div> 中 ， 应 当 添 加 一 个 <Route>。 记 住 ， 这 个 <Route> 是 用 
React Router 4 导入 的 组 件 。 路 由 的 基本 结构 如 下 : 


<Route exact path="/" component={Login} /> 


之 后 还 将 创建 一 个 动态 路 由 。 动 态 路 由 具有 可 以 添加 到 路 由 的 变量 ， 
以 便 将 唯一 路 由 分 配给 具有 唯一 数据 的 组 件 。 


动态 路 由 中 的 变量 以 冒号 C) 开头 ， 后 跟 变 量 名 ， 比 如 id. 
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12.5.3 ” 带 有 路 由 的 最 终 版 App.js 


import React, { Component } from 'react'; 
import { BrowserRouter, Route } from 'react-router-dom'; 
import './App.css'; 


// 导入 路 由 中 用 到 的 组 件 

import Login from './Login/Login'; 

import Collection from './Collection/Collection' ; 

import CollectionSingleBookDetail from './Collection/CollectionSingleBookDe- 
tail'; 


class App extends Component { 
render() { 
return ( 
<BrowserRouter> 
<div> 
<Route exact path="/" component={Login} /> 
<Route exact path="/collection" component={Collection} /> 
<Route name="collectionDetail" path="/collection/:id" compo- 
nent={CollectionSingleBookDetail} /> 
</div> 
</BrowserRouter> 
)3 
} 
} 


export default App; 


12.6 创建 登录 组 件 


创建 一 个 文件 夹 , 并 命名 为 Login。 如 前 所 述 , 该 文件 夹 将 包含 组 件 
的 所 有 代码 。 在 该 文件 夹 中 创建 一 个 JSX 文件 , 并 将 其 命名 为 Login.jsx。 





这 个 Login.jsx 将 充当 一 个 容器 ， 除 了 包含 子 组 件 ， 没 有 其 他 功能 。 
由 此 可 以 控制 子 组 件 的 总 体 布局 。 我 们 的 目标 是 将 UI 布局 与 子 组 件 分 
开 。 如 果 现 在 不 知 所 措 ， 不 必 担 心 ， 很 快 便 会 容 然 开刀 。 
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12.6.1 Login. jsx 


Bulma 是 前 面 全 局 添加 到 index.js 文件 中 的 ， 所 以 不 需要 再 添加 它 。 


下 面 用 Bulma 创建 第 一 个 React 组 件 。 


1. 创建 登录 表单 容器 


首先 创建 包含 表单 的 用 户 界面 。 记 住 ， 应 将 实际 表单 与 Login 组 件 


分 开 ， 以 便 在 Web 应 用 中 的 任何 地 方 复 用 表单 。 


对 于 每 个 新 组 件 ， 我 们 想 使 用 ES6 将 一 些 内 容 导入 其 中 ， 然 后 泻 染 


组 件 。 所 有 ISX 都 将 写 在 一 个 继承 Component 类 的 组 件 中 。 


import React, { Component } from 'react'; 


class Login extends Component { 
render() { 
return ( 

{/* 在 此 放置 JSX 代码 */} 
)3 
} 

} 


export default Login; 


Bulma 提供 了 一 些 很 好 用 的 工具 类 ， 可 以 利用 它们 来 创建 全 高 的 青 


绿色 背景 。 为 了 实现 这 一 点 ,需要 创建 一 个 元 素 ， 并 为 其 分 配 儿 个 类 : 
一 个 基 类 和 两 个 修饰 符 。 





提示 : Bulma 中 的 修饰 符 类 以 is -或 has- 开头 。 
这 些 类 如 下 所 示 。 


O hero: 定义 横幅 图 片 或 重要 信息 的 大 型 区 域 。 
口 is-primary: 添加 primary 背景 色 。 在 Bulma 中 主 色 调 是 青绿 色 ， 
正 是 我 们 想 要 的 。 
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O is-fullheight: 应 用 的 最 小 高 度 为 视 口 高 度 的 100%。 
<section className="hero is-primary is-fullheight"> 


</section> 


现在 浏览 器 窗口 应 该 完全 是 青绿 色 的 。 如 果 任 意 添加 一 些 内 容 , 就 会 
发 现 它们 不 是 垂直 对 齐 的 。Bulma 类 hero-body 可 以 派 上 用 场 , 它 与 hero 
类 一 起 使 用 。 


<section className="hero is-primary is-fullheight"> 
<div className="hero-body"> 
<p>I am generic text.</p> 
</div> 
</section> 


现在 添加 一 些 通用 文本 ， 就 会 看 到 文本 是 垂直 居中 的 。 仍 需 添 加 几 
行 带 有 Bulma 类 的 JSX， 以 实现 容器 所 需 的 用 户 界面 。 


<section className="hero is-primary is-fullheight"> 
<div className="hero-body"> 
<div className="container"> 
<div className="columns is-centered"> 
<div className="column is-5-tablet is-4-desktop is-3-widescreen"> 
{/* 在 此 放置 表单 代码 */} 
<p>I am generic text.</p> 
</div> 
</div> 
</div> 
</div> 
</section> 


O container: 在 预定 义 的 宽度 中 包含 子 元 素 。 

口 columns: 包含 各 列 的 “ 行 ”。 

口 is-5-tablet: 在 平板 设备 上 ， 列 宽 为 容器 宽度 的 5/12。 

D is-4-desktop: 在 桌面 设备 上 ， 列 宽 为 容器 宽度 的 4/12。 
O is-3-widescreen: 在 宽屏 设备 上 ， 列 宽 为 容器 宽度 的 3/12。 
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2. 最 终 版 Login.jsx 
import React, { Component } from 'react'; 


class Login extends Component { 
render() { 
return ( 
<section className="hero is-primary is-fullheight"> 
<div className="hero-body"> 
<div className="container"> 
<div className="columns is-centered"> 
<div className="column is-5-tablet is-4-desktop is-3- 
widescreen"> 
<p>I am generic text.</p> 
</div> 
</div> 
</div> 
</div> 
</section> 
)3 
} 
} 


export default Login; 


126.2 ”创建 登录 表单 


完成 容器 后 ， 下 面 创建 登录 表单 。 这 个 LoginForm.jsx 组 件 将 作为 
Login.jsx 的 子 组 件 导入 。 


import React, { Component } from 'react'; 
import Logo from './../../assets/logo-bis.png'; {/* logo 图 像 */} 


class LoginForm extends Component { 
render() { 
return ( 
{/* 在 此 放置 JSX 代码 */} 
); 
} 
} 


export default LoginForm; 


ISX 中 大 部 分 是 标准 表单 输入 和 复 选 框 。 把 这 个 ISX 添加 到 LoginForm 
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组 件 的 return 语句 中 。 


每 个 表单 都 需要 一 些 东 西 ， 其 中 最 重要 的 是 <form> 元 素 。 在 本 例 中 ， 
<form> 元 素 将 作为 仅 有 的 根 元 素 。 需要 给 它 一 个 Bulma 类 box, 其 作用 是 
在 表单 中 添加 一 个 略 带 阴影 的 白色 背景 。 


<form className="box"> 
</div> 


接 下 来 添加 logo。 如 果 还 未 导入 logo， 使 用 ES6 导入 语句 来 导入 。 
这 张 图 像 将 包装 在 一 个 <div> 中 ， 同 时 对 该 zdiv> 应 用 一 些 Bulma 类 ， 以 
令 其 在 表单 顶部 居中 。Bulma 类 has-text-centered 可 堪 此 用 。 


<div className="field has-text-centered"> 
<img src={Logo} width="167"/> 
</div> 


接 下 来 只 需 为 email 和 password 字段 以 及 提交 按钮 创建 其 余 表单 输 
入 。 这 里 把 Bulma 作为 输入 字段 。 


<div className="field"> 
<label className="LabeL">Email</label> 
<div className="control has-icons-left"> 
<input className="input" type="email" placeholder="e.g. dave@parsecdigi- 
tal.io" required/> 
<span className="icon is-small is-left"> 
<i className="fa fa-envelope"></i> 
</span> 
</div> 
</div> 


你 会 注意 到 其 中 包含 一 些 额外 的 类 ， 比 如 label, has-icons-left, 
is-small, is-left, 它们 用 于 保持 表单 样式 一 致 。 更 重要 的 是 , has-icons- 
left 告诉 表单 输入 : 输入 的 左 侧 应 该 有 图 标 。 因 此 ， 使 用 这 个 类 时 ， 
Bulma 会 添加 一 些 内 边 距 ， 为 图 标 留 出 空间 。 
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说 明 : 这 个 表单 使 用 了 Font Awesome (文本 SVG Att), MS 
思 义 ， 它 非常 棒 。 强 烈 建 议 查 看 其 官方 文档 。 


<form className="box"> 
<div className="field has-text-centered"> 
<img src={Logo} width="167"/> 
</div> 
<div className="field"> 
<label className="Label">Email</label> 
<div className="control has-icons-left"> 
<input className="input" type="email" placeholder="e.g. dave@parsecdi- 
gital.io" required/> 
<span className="icon is-small is-left"> 
<i className="fa fa-envelope"></i> 
</span> 
</div> 
</div> 
<div className="field"> 
<label className="Label">Password</label> 
<div className="control has-icons-left"> 
<input className="input" type="password" placeholder="********" pe- 
quired/> 
<span className="icon is-small is-left"> 
<i className="fa fa-lock"></i> 
</span> 
</div> 
</div> 
<div className="field"> 
<label className="checkbox"> 
<input type="checkbox" required/> 
Remember me 
</label> 
</div> 
<div className="field"> 
<button className="button is-success"> 
Login 
</button> 
</div> 
</form> 


O box: 添加 一 个 包含 子 元 素 的 白色 框 。 
O field: 包含 <form> 元 素 ， 使 其 间距 一 致 。 
口 controL: 表单 输入 容器 。 
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O has-icons-left: 在 输入 字段 左 侧 添 加 内 边 距 ， 以 便 为 图 标 留 出 
空间 。 

DQ input: 表单 输入 的 样式 。 

O is-small: 缩减 元 素 大 小 的 修饰 符 。 

Dis-left: 图 标 居 左 对 齐 。 

口 checkbox: 表单 复 选 框 的 样式 。 





说 明 : 值得 注意 的 是 ， 我 们 不 会 向 该 表单 添加 验证 或 表单 处 理 
程序 。 本 节 旨 在 展示 使 用 Bulma 创建 Web 表单 非常 简单 。 

Wik: 可 以 自由 添加 表单 验证 和 表单 处 理 程序 。 只 需 编写 一 个 
函数 ， 在 正确 提交 时 ， 将 用 户 重 定向 到 /coLLections 路 由 即 可 。 


最 终 版 LoginForm. jsx 组 件 
import React, { Component } from 'react'; 


class LoginForm extends Component { 
render() { 
return ( 
<form className="box"> 
<div className="field has-text-centered"> 
<img src={Logo} width="167"/> 
</div> 
<div className="field"> 
<label className="Label">Email</label> 
<div className="control has-icons-left"> 
<input className="input" type="email" placeholder="e.g. dave@par- 
secdigital.io" required/> 
<span className="icon is-small is-left"> 
<i className="fa fa-envelope"></i> 
</span> 
</div> 
</div> 
<div className="field"> 
<label className="Label">Password</label> 
<div className="control has-icons-left"> 
<input className="input" type="password" placeholder="********" 
required/> 
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<span className="icon is-small is-left"> 
<i className="fa fa-lock"></i> 
</span> 
</div> 
</div> 
<div className="field"> 
<label className="checkbox"> 
<input type="checkbox" required/> 
Remember me 
</label> 
</div> 
<div className="field"> 
<button className="button is-success"> 
Login 
</button> 
</div> 
</form> 
); 
} 
} 


export default LoginForm; 


表单 编写 完成 后 ， 使 用 import LoginForm from'./LoginForm. jsx jE 
导入 Login. jsx 组 件 ， 并 用 <LoginForm /> 替换 原本 的 “generic text” 部 分 。 


也 可 以 通过 表单 验证 和 路 由 收藏 组 件 来 进一步 增强 这 个 表单 。 


12.7 创建 收藏 


“登录 ”后 ， 你 将 被 “ 重 定向 ”到 一 个 收藏 视图 。 收 藏 是 本 章 示例 的 

主要 部 分 ， 负 责 展 示 Bleeding Edge 出 版 社 的 图 书 封面 。 用 户 点 ae 

面 ， 就 会 转 到 相应 的 “详情 ”组 件 ， 在 那里 可 以 “购买 ”或 “分 享 ” 这 
本 书 ， 如 图 12-1 所 示 。 
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12.7.1 Te 
每 个 Web 应 用 都 需要 一 个 页 眉 , 可 以 使 用 Bulma 的 一 些 类 来 简化 其 

创建 过 程 。 


终 完成 后 ， 应 该 如 图 12-2 所 示 。 


~ 





Dave Bening ~ 





A Beepwe Ece Peess Publishing at the speed of technology 








12-2 


创建 E 组 件 ， 并 将 ISX 文件 放 在 src/components/Header/ 
目录 中 。 这 个 Header 组 件 将 作为 页 眉 “ 容 


[z EZ 
[e] 


容 


12.7.2 Header .jsx 


这 个 组 件 的 基本 元 素 是 <header>。<header> 中 将 包含 一 个 带 有 Bulma 


类 的 <nav>。 
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<header> 
<nav> 


</nav> 
</header> 


到 目前 为 止 ， 这 个 页 眉 相 当 不 错 ， 但 是 我 们 希望 它 和 网 页 中 的 其 他 
部 分 之 间 留 一 些 间距 , 因此 把 has-shadow 类 添加 到 <nav> 中 , 以 添加 一 个 
浅 阴影 。 还 应 该 添加 navbar 类 来 添加 Bulma 的 默认 导航 栏 样式 。 


你 的 页 眉 的 ISX 应 与 之 类 似 。 暂时 不 用 关心 HeaderBrand 和 Header - 
UserControls， 稍 后 将 实现 它们 。 


接 下 来 为 导航 栏 添加 JSX。 导 航 栏 需要 navbar-menu, 尤其 是 在 桌面 
设备 上 ， 原 因 是 你 想 在 桌面 设备 ( 而 不 是 移动 设备 ) 上 显示 导航 栏 。 


navbar-start 用 于 导航 栏 的 左 侧 部 分 。navbar-iten 用 于 定义 导航 栏 
中 的 每 个 单独 项 。 


<div className="navbar-menu"> 
<div className="navbar-start"> 
<div className="navbar -item"> 
<small>Publishing at the speed of technology</small> 
</div> 
</div> 
</div> 


最 终 版 Header .jsx 


import React, { Component } from 'react'; 
import HeaderBrand from './HeaderBrand'; 
import HeaderUserControls from './HeaderUserControls'; 


class Header extends Component { 
render() { 
return ( 
<header> 
<nav className="navbar has-shadow"> 
<HeaderBrand /> 
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<div className="navbar -menu"> 
<div className="navbar-start"> 
<div className="navbar -item"> 
<small>Publishing at the speed of technology</small> 
</div> 
</div> 
<HeaderUserControls /> 
</div> 
</nav> 
</header> 
)3 
} 
} 


export default Header; 


O navbar: 人 带 结构 的 全 宽 响 应 式 垂直 导航 栏 ， 即 主 容 器 。 

O has-shadow: 修饰 符 ， 为 元 素 添 加 box-shadow。 

O navbar-start: 菜单 的 左 侧 部 分 ， 在 桌面 设备 上 会 显示 在 导航 栏 
的 品牌 标志 旁 。 


O navbar-item: 导航 栏 的 每 个 单独 项 ， 可 以 是 a 或 div。 





12.7.3 HeaderBrand. jsx 
HeaderBrand 是 Header 的 子 组 件 ， 用 于 品牌 标志 ， 包 括 logo. 


创建 一 个 新 文件 ， 并 命名 为 HeaderBrandjsx， 然 后 将 其 放 在 src/ 
components/Header 目录 中 。 导 入 React 后 ， 请 确保 将 logo 导入 为 组 件 依 
赖 项 。 


该 组 件 的 基本 元 素 是 一 个 带 有 Bulma 类 的 <div>。 


需要 通过 navbar-item 和 navbar-brand 包装 logo 图 像 ， 如 下 所 示 。 
使 用 navbar-brand 是 因为 它 在 所 有 设备 上 都 总 是 可 见 的 。 这 个 类 常用 于 
品牌 标志 或 品牌 理念 等 。 
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<div className="navbar-brand"> 
<a className="navbar-item"> 
<img src={Logo} /> 
</a> 
</div> 


接 下 来 ， 在 这 个 组 件 中 需要 为 移动 设备 创建 移动 导航 图 标 。 使 用 
Bulma 很 容易 实现 这 一 点 。 创 建 3 个 <span> 标 签 ， 并 使 用 navbar-burger 
和 burger 将 其 包装 起 来 。 


<div className="navbar-burger burger"> 
<span></span> 
<span></span> 
<span></span> 

</div> 


实现 汉堡 图 标 从 未 如 此 简单 ! 


最 终 版 HeaderBrand. jsx 


import React, { Component } from 'react'; 
import Logo from './../../assets/logo.png'; 


class HeaderBrand extends Component { 
render() { 
return ( 
<div className="navbar-brand"> 
<a className="navbar-item"> 
<img src={Logo} /> 
</a> 
<div className="navbar-burger burger"> 
<span></span> 
<span></span> 
<span></span> 
</div> 
</div> 
)3 
} 
} 


export default HeaderBrand; 


O navbar-brand: 始终 可 见 ， 通 常 包含 logo 和 一 些 链接 或 图 标 。 
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D navbar-burger: 汉堡 图 标 , 用 于 在 可 触摸 设备 上 开关 导航 栏 菜单 。 
QO burger: 包含 3 个 <span> 标 签 的 容器 ， 这 3 个 标签 将 泻 染 出 一 个 
“汉堡 ”， 即 移动 端 导航 图 标 。 





12.7.4 HeaderUserControls. jsx 


HeaderUserControls.jsx 是 页 眉 的 最 后 一 个 组 件 。 它 只 是 一 个 简单 
的 下 拉 菜 单 ， 其 中 有 “个 人 资料 ”和 “注销 ”之 类 的 附加 链接 。 在 src/ 
components/Header 目录 中 创建 一 个 新 文件 ， 并 将 其 命名 为 HeaderUser- 
Controls.jsx。<div> 将 作为 该 组 件 的 基本 元 素 。 

<div className="navbar-end"> 

</div> 

其 中 使 用 了 navbar-end， 因 为 它 将 位 于 导航 栏 的 末端 或 右 侧 。 在 其 
中 添加 一 个 符 套 <div> ， 并 为 其 研 予 Bulma 类 has-dropdown 和 is- 
hoverable。 这 些 修饰 符 的 作用 显而易见 ， 轻松 创建 出 一 个 在 鼠标 指针 悬 
停 时 显示 的 下 拉 菜 单 。 





<div className="navbar-end"> 
<div className="navbar-item has-dropdown is-hoverable"> 
<div className="navbar -link"> 
Dave Berning 


</div> 
</div> 
</div> 
虽然 这 段 代码 不 错 ， 但 没有 实现 下 拉 菜 单 ， 接 下 来 需要 创建 它 。 下 


拉 菜 单 应 该 始终 包装 在 navbar-dropdown 类 中 。 请 确保 用 navbar-iten 类 
包装 每 个 下 拉 项 。 


<div className="navbar -dropdown"> 
<a className="navbar-item"> 
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<div> 
<span className="icon is-small"> 
<i className="fa fa-user-circle-o"></i> 
</span> 
Profile 
</div> 
</a> 
<a className="navbar-item"> 
<div> 
<span className="icon is-small"> 
<i className="fa fa-bug"></i> 
</span> 
Report bug 
</div> 
</a> 
<a className="navbar-item"> 
<div> 
<span className="icon is-small"> 
<i className="fa fa-sign-out"></i> 
</span> 
Sign Out 
</div> 
</a> 
</div> 


下 拉 菜 单 的 ISX 应 该 位 于 具有 用 户 名 的 navbar-link 之 下 。 在 这 个 
例子 中 ， 用 户 名 为 Dave Berning。 


口 navbar-end: 菜单 的 右 侧 部 分 ， 显示 在 导航 栏 末端 。 

口 is-hoverable: “4 ipndSEt Eee navbar-item 上 时 , 将 显示 
下 拉 荣 单 。 

O navbar-link: 下 拉 菜 单 的 同 级 链接 ， 带 有 箭头 。 





最 终 版 HeaderUserControls. jsx 


最 终 的 HeaderUserControls 组 件 代 码 应 该 如 下 所 示 : 


import React, { Component } from 'react'; 


class HeaderUserControls extends Component { 
render() { 
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return ( 
<div className="navbar -end"> 


<div className="navbar-item has-dropdown is-hoverable"> 


<div className="navbar - Link"> 
Dave Berning 
</div> 
<div className="navbar -dropdown"> 
<a className="navbar -item"> 
<div> 
<span className="icon is-small"> 


<i className="fa fa-user-circle-o"></i> 


</span> 
Profile 
</div> 
</a> 
<a className="navbar -item"> 
<div> 
<span className="icon is-small"> 
<i className="fa fa-bug"></i> 
</span> 
Report bug 
</div> 
</a> 
<a className="navbar -item"> 
<div> 
<span className="icon is-small"> 
<i className="fa fa-sign-out"></i> 
</span> 
Sign Out 
</div> 
</a> 
</div> 
</div> 
</div> 
)3 
} 
} 


export default HeaderUserControls; 


12.75 ”整合 页 眉 


完成 了 页 眉 的 子 组 件 后 ， 把 它们 导入 Header .jsx。 
应 该 如 下 所 示 : 


最 终 版 本 的 页 眉 
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import React, { Component } from 'react'; 
import HeaderBrand from './HeaderBrand'; 
import HeaderUserControls from './HeaderUserControls'; 


class Header extends Component { 
render() { 
return ( 
<header> 
<nav className="navbar has-shadow"> 
<HeaderBrand /> 


<div className="navbar -menu"> 
<div className="navbar-start"> 
<div className="navbar -item"> 
<small>Publishing at the speed of technology</small> 
</div> 
</div> 
<HeaderUserControls /> 
</div> 
</nav> 
</header> 
)3 
} 
} 


export default Header; 


12.8 Footer. jsx 


页 脚 组件 比 页 眉 组 件 简单 得 多 。 当 然 ， 你 可 以 尝试 新 掌握 的 Bulma 
技能 ， 添 加 额外 的 列 、 图 像 、 文 本 和 页 脚 导航 栏 。 





创建 一 个 新 的 ISK 文件 ， 命 名 为 Footer.jsx， 并 将 其 放 入 src/Footer/ 
目录 中 。 


这 个 JSX 非常 简单 : 


<footer className="footer"> 

<p className="has-text-centered">Copyright &copy; 2018. ALL Rights Re- 
served</p> 
</footer> 
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QO footer: 用 于 页 脚 的 类 。 此 元 素 中 可 以 包含 任何 元 素 、 列 表 或 
图 像 。 
口 has-text-centered: 居中 对 齐 文本 。 





页 脚 已 经 构建 好 了 。 稍 后 要 把 页 眉 和 页 脚 导 入 collections 和 
collections detail 组 件 。 


最 终 的 页 脚 组 件 应 如 下 所 示 : 
import React, { Component } from 'react'; 


class Footer extends Component { 
render() { 
return ( 
<footer className="footer"> 
<p className="has-text-centered">Copyright &copy; 2018. ALL Rights 
Reserved</p> 
</footer> 
)3 
} 
} 


export default Footer; 


12.9 图 书 收 藏 主体 


图 书 收藏 主体 负责 控制 收藏 的 布局 、 遍 历数 据 并 泻 染 单个 组 件 ( 你 
将 向 其 中 传递 数据 )。 本 节 的 数据 来 自 src/data 目录 中 的 JSON 文件 
books.json， 其 中 包含 一 份 通用 数据 。 


数据 对 象 如 下 所 示 : 


{ 
"id": 5, 
"name": "Developing a React.js Edge", 
"cover": "react-edge. jpg", 
"author": "Richard Feldman, Frankie Bagnardi, & Simon Hojberg", 
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"details": "Lorem ipsum dolor sit amet..." 


} 


创建 一 个 ISX 文件 并 命名 为 Collection.jsx ,然后 放 入 src/components/ 
Collection/ 目 录 中 。 该 组 件 将 充当 容器 并 包含 所 有 子 组 件 。 该 组 件 中 的 基 
本 元 素 是 <div>。 内 套 在 该 zdiv> 中 的 是 另 一 个 带 有 container 类 的 <div>。 
这 个 类 以 固定 宽度 和 居中 方式 “包含 ”内 容 。 








12.9.1 Collection.jsx 


<div> 
<div className="container"> 


</div> 
</div> 


接 下 来 添加 一 些 ISX 来 填充 组 件 。 这 个 组 件 的 最 终 目标 是 在 单个 组 
件 上 显示 所 有 图 书 封面 ,为 此 需要 遍历 数据 ,传递 props， 并 使 用 Bulma 
编写 相应 的 JSX。 创 建 一 个 <div> 并 加 上 columns 类 ,在 这 个 columns <div> 
之 后 ， 再 创建 一 个 <div> 并 加 上 column 类 。 当 然 ， 这 是 Bulma 的 基础 ， 
EHRE, eh 





这 里 选择 列 宽 为 容器 宽度 的 3/12 来 授 代 该 数据 和 容器 Collection- 
SingtLeBook 组 件 。 当 引用 CollectionSingleBook 组件 时 ,请 确保 通过 props 
传递 数据 。 


<h1 className="title is-2">Your CoLLection</h1> 
{/* 和 迭代 数据 (books) */} 
<div className="columns is-multiline"> 
{this.state.books.map((book) => ( 
<div className="column is-3"> 
<CollectionSingleBook key={book.id} book={book} /> { /* 即将 实现 此 
处 内 容 */ } 
</div> 
))} 


</div> 
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最 终 版 Collection. jsx 


import React, { Component } from 'react'; 

import Header from './../Header/Header' 

import Footer from './../Footer/Footer'; 

import CollectionSingleBook from './CollectionSingleBook' ; 
import BookData from './../../data/books.json'; 

import styles from './styles/Collection.css'; 


class Collection extends Component { 
constructor() { 
super(); 
this.state = { 
books: BookData 


}; 
} 
render() { 
return ( 
<div> 
<Header /> 
<div className="container has-gutter-top-bottom"> 
<h1 className="title is-2">Your Collection</h1> 
{/* 迭代 数据 (books) */} 
<div className="columns is-multiline"> 
{this.state.books.map((book) => ( 
<div className="column is-3"> 
<CollectionSingleBook key={book.id} book={book} /> 
</div> 
))} 
</div> 
</div> 
<Footer /> 
</div> 
); 
} 


} 


export default Collection; 


O title: 定义 标题 ( 非常 像 <h1> )。 
O is-2: 基于 12 列 布局 。 元 素 宽 度 为 容器 宽度 的 2/12。 
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O is-multiline: 定义 columns 行 以 包装 column 项 。 如 果 不 加 上 这 
个 类 ， 列 就 会 在 它 的 容器 上 重复 ， 而 非 包装 其 中 。 
O is-3: 基于 12 列 布局 。 元 素 宽度 为 容器 宽度 的 3/12。 











12.9.2 CollectionSingleBook.jsx 


这 个 组 件 比 较 小 。CollectionsSingleBook.jsx 仅 作 为 图 书 封面 , 它 带 
有 一 个 通 向 detail 组 件 的 链接 。 该 组 件 真 正 说 明了 为 何 应 该 把 组 件 分 解 成 
小 的 、 容 易 理 解 的 部 分 。 


要 说 明 的 是 ，CollectionsingleBook 组 件 将 封面 大 小 限制 为 浏览 器 
窗口 (或 者 本 例 中 的 容器 ) 的 1/3。 在 单 本 书 组 件 本 身 没有 大 小 限制 的 情 
况 下 ， 可 以 将 其 添加 到 任何 位 置 ， 并 使 用 其 他 父 组 件 来 控制 大 小 。 


说 明 : Link 是 ReactRouter4 的 一 部 分 。 可 以 使 用 import { Link, 


withRouter} from 'react-router-dom' ;导入 它 : 


<div> 
<Link to={{pathname: */collection/${this.props.book.id}*, state: { single- 
Book: this.props.book }}}> 
<img src={require("./../../assets/" + this.props.book.cover)}/> 
</Link> 
</div> 


在 这 个 组 件 中 ， 只 需 构造 动态 链接 ， 并 通过 props 将 单个 “book” 
对 象 传递 给 下 一 级 组 件 CollectionSingleBookDetail. jsx. 


最 终 版 CollectionSingleBook. jsx 


import React, { Component } from 'react'; 
import { Link, withRouter} from 'react-router-dom'; 


class CollectionSingleBook extends Component { 
render() { 
return ( 
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<div> 
<Link to={{pathname: */collection/${this.props.book.id}*, state: 

{ singleBook: this.props.book }}}><img src={require("./../../assets/" + 
this.props.book.cover)}/></Link> 

</div> 

); 
} 

} 


export default CollectionSingleBook; 


12.9.3 CollectionSingleBookDetail. jsx 


这 是 一 个 动态 组 件 , 这 意味 着 路 由 总 是 不 同 的 , 但 使 用 相同 的 组 件 。 
路 由 定义 了 哪些 数据 传递 给 这 个 组 件 。 可 以 点 击 Collectionsingle- 
Book. jsx 访问 此 组 件 。 我 们 使 用 图 书 的 这 来 确定 哪 本 书 的 信息 会 加 载 到 
此 组 件 中 。 


这 个 组 件 的 布局 非常 简单 ， 包 含 两 列 。 左 列 只 包含 书 的 封面 ， 右 列 
只 包含 书 的 相关 信息 ， 还 有 一 个 嵌 套 的 columns 行 ， 用 于 提供 “分 享 ” 
和 “购买 ” 按钮。 务必 将 container 类 添加 到 <div> 中 ， 以 便 将 内 容 限制 
为 固定 宽度 并 且 居 中 。 


singleBook 总 是 经 props 从 Collection.jsx 直接 引用 数据 。 右 列 需 
要 使 用 修饰 符 类 is-one-third。 应 限制 列 宽 以 免 图 片 过 大 ， 而 其 余 列 会 
自动 调整 大 小 。 





<div className="container"> 
<div className="columns"> 
<div className="column"> 
<h1 className="title is-2">{singleBook.name}</hi> 
<p>By: {singleBook.author}</p> 
</div> 
</div> 
<div className="columns"> 
<div className="column is-one-third"> 
<img src={require("./../../assets/" + singleBook.cover)}/> 
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</div> 
<div className="coLlumn"> 
<p>{singleBook.details}</p> 


<div className="columns"> 
<div className="column"> 
<button className="button is-primary is-large is-fullwidth">Buy 
Book</button> 
</div> 
<div className="column"> 
<button className="button is-secondary is-large is- 
fullwidth">Share Book</button> 
</div> 
</div> 
</div> 
</div> 
</div> 


最 终 组 件 内 容 应 该 如 下 所 示 : 


import React, { Component } from 'react'; 
import Header from './../Header/Header'; 
import Footer from './../Footer/Footer'; 


class CollectionSingleBookDetail extends Component { 
render() { 
const singleBook = this.props.location.state.singleBook; { /* 仅 为 提 
高 JSX 可 读 性 ， 非 必需 。 */} 


return ( 
<div> 
<div className="container"> 
<div className="coLumns"> 
<div className="column"> 
<h1 className="title is-2">{singleBook.name}</h1> 
<p>By: {singleBook.author}</p> 
</div> 
</div> 
<div className="columns"> 
<div className="column is-one-third"> 
<img src={require("./../../assets/" + singleBook.cover)}/> 
</div> 
<div className="column"> 
<p>{singleBook.details}</p> 
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<div className="columns"> 
<div className="column"> 
<button className="button is-primary is-large is- 
fullwidth">Buy Book</button> 
</div> 
<div className="column"> 
<button className="button is-secondary is-large 
is-fullwidth">Share Book</button> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
)3 
} 
} 


export default CollectionSingleBookDetail; 


O title: 给 文本 添加 标题 样式 。 

O is-2: 不 同 大 小 的 .tttle， 相 当 于 <hz>。 

O is-one-third: 将 列 定义 为 容器 的 13 ， 其 他 列 将 填充 剩余 空间 。 
O is-secondary: 使 用 <button> 的 次 要 颜色 。 

O is-large: 增 大 按钮 大 小 。 

O is-fullwidth: 使 <button> 占 据 100% 的 宽度 。 





12.9.4 整合 收藏 组 件 


至 此 , 完成 了 所 有 收藏 组 件 , 下 面 将 页 由 和 页 脚 导 入 Collection. jsx 
组 件 。 


import Header from './../Header/Header'; 
import Footer from './../ Footer/Footer'; 


在 Collections. jsx 和 CollectionSingleBookDetail. jsx 组件 中 , 分 
别 在 .container 的 上 方 和 下 方 添加 <Header/> 和 <Footer/>。 
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最 终 代码 应 如 下 所 示 : 


Collections.jsx 〈 容 器 ) 


import React, { Component } from 'react'; 

import Header from './../Header/Header' 

import Footer from './../Footer/Footer'; 

import CollectionSingleBook from './CollectionSingleBook' ; 
import BookData from './../../data/books.json'; 


class Collection extends Component { 
constructor() { 
super(); 
this.state = { 
books: BookData 


}; 
} 
render() { 
return ( 
<div> 
<Header /> 
<div className="container has-gutter-top-bottom"> 
<h1 className="title is-2">Your Collection</h1> 
{/* 迭代 数据 (books) */} 
<div className="columns is-multiline"> 
{this.state.books.map((book) => ( 
<div className="column is-3"> 
<CollectionSingleBook key={book.id} book={book} /> 
</div> 
))} 
</div> 
</div> 
<Footer /> 
</div> 
); 
} 


export default Collection; 
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12.10 ”运行 应 用 





如 果 还 未 构建 示例 项 目 ， 应 执行 以 下 命令 ， 在 本 地 构建 项 目 : 
npm start 


如 果 构 建 正常 ， 应 该 显示 登录 窗口 。 这 个 表单 没有 任何 功能 ， 但 是 
要 查看 collections 组 件 ， 需 要 在 URL 栏 使 用 /collection 进行 导航 。 





你 会 看 到 Bleeding Edge 出 版 社 图 书 封面 的 一 个 栅 格 ! 点 击 每 本 书 的 
封面 , 会 导航 至 /collection/<id>。 这 些 细 节 窗 口 ( detail screen ) 都 是 一 


个 个 单独 的 组 件 ， 会 有 数据 传递 到 其 中 。 


12.11 小 结 


Bulma 是 一 个 强大 的 CSS 框架 ， 可 以 在 React 项 目 中 用 它 快速 创建 
原型 和 用 户 界 面 。Bulma 是 基于 Flexbox 构建 的 ， 所 以 如 果 你 使 用 React 
Native 构建 原生 移动 应 用 程序 ， 也 可 以 采用 其 中 的 一 些 概念 。 





本 章 细致 讲解 了 如 何 集 成 Bulma 与 React, 以 及 在 某 些 情况 下 为 何 选 
用 特定 的 Bulma CSS 类 。 


第 13 章 将 介绍 如 何 自 定义 Bulma。 


第 13 章 


HEX Bulma 


Bulma 的 默认 样式 是 经 过 精心 选择 的 , 旨 在 满足 大 多 数 用 户 的 需求 ， 
并 确保 使 用 Bulma 构建 的 任何 界面 都 美观 。 


但 即使 页 面 布局 自然 平衡 组 件 足够 清晰 且 可 以 直接 使 用 ， 你 可 能 
也 不 希望 网 站 最 终 看 起 来 类 似 于 其 他 Bulma 实例 。 首 先 ， 你 可 能 已 经 定 
义 了 颜色 和 排版 规则 ， 使 用 Bulma 构建 商业 级 应 用 时 尤其 如 此 ， 这 时 你 
需要 严格 遵循 已 经 定义 的 品牌 指导 原则 。 其 次 ， 不 管用 Bulma 构建 哪 类 
网 站 ， 往 往 需 要 赋予 其 风格 。 一 套 设计 不 可 能 满足 所 有 人 。 


Bulma 是 一 个 易于 自 定 义 的 CSS 框架 ,可 以 通过 以 下 儿 种 方式 实现 : 


(1) 重 写 Bulma 的 初始 变量 和 继承 变量 ; 
(2) 重 写 Bulma 的 组 件 变量 ; 

(3) 添加 自己 的 变量 ; 

(4) 重 写 Bulma 的 样式 ; 

(5) 添加 自己 的 样式 。 
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要 自 定 义 界 面 ， 只 需 遵循 其 中 之 一 即 可 。 
如 Bulma Expo 所 述 ，Bulma 这 个 强大 的 工具 可 以 满足 任何 类 型 的 


设计 。 


首先 需要 在 计算 机 上 安装 Sass。 


13.1 安装 node-sass 


Bulma 是 使 用 CSS 预 处 理 器 Sass 构建 的 。 虽 然 Sass 最 初 是 用 Ruby 
编写 的 ( 并且 可 通过 Ruby gem 获取 )， 但 推荐 使 用 更 高 效 的 C/C++ 编译 
器 LibSass。 


实际 上 大 多 数 开 发 人 员 使 用 node-sass， 它 提供 了 Node.js 到 LibSass 
的 绑 定 。 这 正 是 我 们 要 用 的 库 。 


首先 需要 在 计算 机 上 安装 Node.js。 


13.1.1 创建 package.json 


打开 终端 ， 转 到 保存 HTML 文件 的 文件 夹 ( 包含 books.htnml、 
customers .htmt 等 )， 然 后 键入 以 下 内 容 : 


npm init 

按照 说 明 操 作 。 该 命令 将 创建 package.json 文件 。 
然后 键入 以 下 内 容 : 

npm i bulma node-sass --save-dev 


Zm Ai package.json 添加 开发 环境 依赖 : 
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"devDependencies": { 
"bulma": "40.6.2", 
"node-sass": "%4.7.2" 


} 
目前 , 脚本 列表 中 只 有 一 个 名 为 test 的 脚本 , 它 只 会 回 显 一 条 错误 
信息 ， 然 后 退出 。 
将 该 脚本 列表 替换 为 以 下 内 容 : 
"scripts": { 
"build": "node-sass --output-style expanded --include-path=node_modules/ 
bulma sass/custom.scss css/custom.css", 
"start": "npm run build -- --watch" 


} 


其 中 最 重要 的 脚本 是 build: 它 将 输入 sass/custom.scss 文件 ， 并 创 
建 css/custom.css 文件 输出 。 


start 脚本 的 作用 仅仅 是 将 buttLd 转换 为 监听 脚本 。 


13.1.2 ”创建 sass/custom.scss 文 件 


前 面 都 是 通过 CDN 导入 Bulma CSS 文件 的 : 


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/ 
0.6.1/css/bulma.min.css"> 


既然 要 自 定义 版 本 ， 那 么 在 所 有 HTML 文件 中 ， 需 要 将 <Link> 标 签 
替换 为 新 标签 : 
<link rel="stylesheet" href="css/custom.css"> 


然而 /css 文件 夹 和 custom.css 文件 尚 不 存在 ! 


在 packagejson 文件 所 在 的 目录 中 创建 /css 和 /sass 文件 夹 。 在 后 者 中 
添加 custom.scss 文件 。 
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EJA Bulma 本 身 使 用 .sass 文件 , 但 大 多 数 开 发 人 员 更 喜欢 .scss 文件 
语法 ， 因 为 它 更 容易 理解 ， 所 以 这 里 使 用 它 。 
要 查看 上 述 配 置 是 否 正常 工作 ， 请 在 custom.scss 中 编写 以 下 内 容 : 
html { 
background: red; 
} 
然后 打开 终端 执行 npm run build 命令 ， 应 该 能 看 到 如 下 输出 : 


Rendering Complete, saving .css file... 
Wrote CSS to /path/to/html/css/custom.css 


打开 页 面 ， 应 该 会 看 到 图 13-1 所 示 内 容 。 








13-1 


利用 自己 的 custom.css 文件 实现 了 : 


口 移 除 Bulma 样式 ; 
口 添加 自 定 义 样 式 。 








现在 可 以 删除 该 CSS 规则 ， 清 空 custom.scss。 
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13.2 导入 Bulma 


目前 已 在 计算 机 上 本 地 安装 了 Bulma， 但 尚未 使 用 它 。 


自 此 将 非常 频繁 地 更 新 .scss 文件 ,所 以 可 以 改 为 运行 npm start, 该 
命令 将 监听 文件 的 修改 。 


在 空 的 custom.scss 文件 中 添加 : 
@import "node_modules/bulma/bulma"; 


保存 文件 。 由 于 文件 发 生 了 更 改 ， 终 端 将 会 显示 如 下 输出 ， 效 果 见 
Al 13-2. 


=> changed: /path/to/html/sass/custom.scss 
Rendering Complete, saving .css file... 
Wrote CSS to /path/to/html/css/custom.css 
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= 复 正 常 了 。 目 前 并 非 是 从 导入 已 生成 的 .css 文件， 而 
切 都 恢复 正常 了 。 目 前 并 非 是 从 CDN 导入 已 ‘Jess 文件 ， 
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是 将 Bulma 的 Sass 版 本 导入 custom.scss 文件 ， 然 后 生成 custom.css。 
既然 还 没有 做 任何 改动 ， 自 然 看 不 出 有 何不 同 。 自 定义 设计 的 第 一 

步 ， 是 导入 新 的 字体 系列 。 

13.3 ”导入 谷歌 字体 


新 的 设计 使 用 了 两 种 谷歌 字体 ; Karla 和 Rub 六。 虽然 可 以 通过 <link> 
标签 导入 它们 ,但 是 从 CSS 文件 中 的 某 个 位 置 导 入 它们 更 容易 。 





在 导入 Bulma 前 ， 先 要 导入 字体 ， 因 此 在 custom.scss 文件 的 顶部 添 
加 如 下 代码 : 


@import url('https://fonts.googleapis.com/css?family=Kar la: 400, 700|Rubik: 
400 ,500,700'); 


由 于 字体 是 第 三 方 依赖 项 ， 因 此 必须 先导 入 它们 。 


13.4 导入 自己 的 变量 


虽然 Bulma 使 用 单字 体系 列 ， 但 新 设计 了 使 用 两 种 字体 ， 因 此 需要 
创建 一 个 新 变量 来 存储 第 二 个 字体 系列 。 

在 导入 字体 和 导入 Bulma 的 中 间 添 加 如 下 代码 : 

// 新 变量 

Sfamily-heading: "Rubik", BlinkMacSystemFont, -apple-system, "Helvetica", 


"Arial", sans-serif; 


在 另行 通知 之 前 , 必须 在 @import "node_modules/bulma/bulma" ;这 一 
行 之 前 添加 新 的 Sass 片段 。 
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Rubik 将 主要 用 作 标 题字 体 , 而 其 他 字体 作为 备 选 , 以 防 Rubik 无 法 
加 载 。 


该 设计 还 将 大 量 使 用 一 种 新 的 阴影 ， 所 以 最 好 也 将 其 存储 为 变量 : 
Slarge-shadow: © 10px 20px rgba(#000, 0.05); 


13.5 理解 Bulma 变量 


Bulma 包含 3 组 变量 : 








O 初始 变量 是 Sass 变量 的 集合 ， 这 些 变量 被 赋予 一 个 字面 量 ， 比 如 
Sblue: hsl(217, 71%, 53%); 

O 继承 变量 要 么 引用 初始 变量 ， 比 如 $link: $blue， 要 公使 用 Sass 
函数 来 确定 其 值 ， 比如 $green-invert: findColorInvert($green) ; 
O 组 件 变量 特定 于 每 个 Bulma 元 素 或 组 件 , 并 引用 之 前 定义 的 变量 
或 新 的 字面 量 。 





这 可 以 形成 一 条 链 路 ， 举 例如 下 。 


Q Æ initial-variables.sass F, 蓝 色 使 用 了 字面 量 : Sblue: hsL(217， 
71%, 53%); 

口 在 derived-variables.sass F, $link 的 颜色 使 用 这 种 蓝 色 : $link:$blue; 
口 在 breadcrumb.sass 中 , 面包 居 项 的 颜色 使 用 链接 颜色 : $breadcrumb- 


item-color: $links 





这 使 得 Bulma 用 户 在 自 定义 方面 拥有 很 大 的 灵活 性 。 


口 可 以 更 新 $blue 值 ， 它 将 反映 在 整个 网 站 上 。 
口 可 以 设置 $link: $green 来 更 新 所 有 链接 和 面包 届 项 。 
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O thay Wiese HOS a eZ: Sbreadcrumb-item-color: 





Sred。 

O 或 者 两 者 都 实现 : 将 所 有 链接 设 为 绿色 ， 而 将 所 有 面包 居 项 设 为 
红色 。 

这 样 设置 的 目的 是 : 


O 便于 在 任何 地 方 更 新 单个 值 ( 因为 $blue 是 单独 定义 的 ); 
口 元 素 和 组 件 仍 可 单独 设置 样式 。 





13.6 ”覆盖 Bulma 的 初始 变量 


新 设计 带 来 了 新 的 品牌 颜色 、 第 二 种 字体 ( Karla ) 以 及 更 大 的 边框 
半径 。 要 使 用 新 品牌 样式 非常 简单 : 具 需 使 用 新 值 来 更 新 它们 各 自 对 应 
的 变量 ， 这 些 变化 就 会 反映 在 整个 网 站 上 。 


在 custom.scss 中 编写 以 下 内 容 : 


// 初始 变量 
turquoise: #5dd52a; 
Sred: #D30012; 
Syellow: #FFF200; 
Sgreen: #24D17D; 
Sblue: #525adc; 


Sfamily-sans-serif: "Karla", BlinkMacSystemFont, -apple-system, 
"Helvetica", "Arial", sans-serif; 


Sradius: 5px; 


记 住 ， 需 要 在 导入 Bulma 之 前 添加 以 上 内 容 ， 效 果 如 图 13-3 所 示 。 
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13-3 
现在 ， 颜 色 已 更 新 ， 正 文 的 字体 也 变 成 Karla 了。 


所 有 Bulma 变量 都 使 用 了 !default 标志 。 这 是 一 个 Sass 特 性 , “EER 
味 着 除非 变量 之 前 被 赋 过 值 ， 否 则 将 被 赋 一 个 默认 值 。 


这 就 是 为 什么 在 设置 了 新 变量 后 导入 Bulma 仍然 正常 工作 ， 并 且 保 
留 了 新 的 品牌 颜色 。 


13.7 ”覆盖 Bulma 的 组 件 变量 


新 设计 的 页 面 背景 颜色 稍 暗 ， 这 是 在 generic.sass 中 定义 的 。 调 整 不 
需要 编写 新 的 CSS 规则 ， 只 需要 适当 修改 变量 即 可 ， 在 本 例 中 ， 指 的 是 
$body-background-coloro 


可 以 使 用 Bulma 的 一 个 初始 变量 $white-ter。 要 访问 该 变量 ， 需 要 
先导 入 它 : 
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// 导入 其 余 的 BuLma 初始 变量 
@import "node_modules/bulma/sass/utilities/initial-variables"; 


现在 所 有 初始 变量 都 可 以 访问 ,并且 可 用 于 更 新 组 件 变量 。 


在 导入 初始 变量 之 后 ， 导 入 Bulma 的 其 余部 分 之 前 ， 请 对 该 变量 重 
新 赋值 ， 效 果 见 图 13-4。 


Sbody-background-color: $white-ter; 
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下 一 步 是 利用 前 面 创 建 的 SLarge-shadow。Bulma 的 box 组 件 和 card 
组 件 都 可 以 使 用 它 ， 而 且 box 还 需要 更 大 的 内 边 距 ， 效 果 见 图 13-5. 


$box-padding: 2rem; 
$box-shadow: $lLarge-shadow; 


Scard-shadow: $large-shadow; 
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总 体 而 言 ， 新 设计 的 空间 更 大 ， 并 且 列 与 列 之 间 的 间距 增 大 了 : 


$column-gap: 1rem; 

按钮 和 输入 在 聚焦 时 仍 有 蓝 色 阴影 ， 但 灰色 的 看 起 来 更 好 ， 再 加 上 
红色 的 下 拉 箭 头 ， 如 图 13-6 所 示 。 

Sbutton-focus-box-shadow-color: rgba($black, 0.1); 


Sinput-arrow: $red; 
Sinput-focus-box-shadow-color: rgba($black, 0.1); 





This Month v 
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侧 边 栏 菜 单 略 显 突出 ， 使 用 下 面 这 些 值 将 使 其 变 为 灰 阶 ， 效 果 见 
图 13-7。 


Smenu-item-color: $grey; 
$Smenu-item-hover-background-color: transparent; 
Smenu-item-active-background-color: $Swhite; 
Smenu-item-active-color: $Sblack; 
Smenu-item-radius: $radius; 
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导航 栏 和 表格 的 间距 也 需要 增 大 ， 如 图 13-8 所 示 。 


Snavbar-height: 6rem; 
Snavbar-item-img-max-height: 3rem; 

Snavbar -item-hover-background-color: transparent; 
Snavbar -dropdown-border-top: none; 


Stable-cell-border: 2px solid $Swhite-ter; 
Stable-cell-padding: 0.75em 1.5em; 
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只 需 重 写 Bulma 的 变量 ， 而 不 需要 编写 任何 CSS， 设 计 就 已 经 大 为 
改观 : 新 的 配色 方案 、 额 外 的 字体 ， 以 及 更 合适 的 间距 。 
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13.8 修改 HTML 


更 高 的 导航 栏 视觉 上 更 突出 ， 但 目前 logo KET, WE 13-9 所 示 。 
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要 节约 水 平 空间 ,需要 分 开 图 标 和 文字 。 将 logo.png 替换 为 icon.png， 
效果 见 图 13-10。 


<a class="navbar-item"> 
<img src="images/icon.png"> 
</a> 











图 13-10 





把 文字 替换 成 带 有 品牌 理念 的 样式 ， 效 果 见 图 13-11. 


<div class="navbar-item"> 
<div> 
<img src="images/type.png" width="250.5" height="21"> 
<br> 
<small>Publishing at the speed of technology</small> 
</div> 
</div> 
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13.9 自 定义 规则 


由 于 Bulma 是 用 Sass 编写 的 ， 因 此 可 以 使 用 该 语言 的 所 有 功能 : 


O 变量 ; 
O mE; 
口 混入 (mixin ); 
O 继承 。 





前 面 使 用 了 新 的 变量 , 要 进一步 自 定义 设计 , 可 以 使 用 扩展 和 嵌 套 。 


自 此 ， 所 有 代码 都 必须 在 导入 Bulma 之 后 ， 写 在 文件 的 末尾 。 


13.9.1 第 二 字体 

Bulma 没有 第 二 个 字体 系列 ， 所 以 必须 编写 自己 的 CSS 规则 ， 好 在 
扩展 这 个 类 很 容易 。 

在 @import "node_modules/bulma/bulma" ;之 后 编写 如 下 代码 ; 


%heading { 
font-family: $family-heading; 
font-weight: 500; 


这 是 一 个 Sass 占 位 符 : 通过 它 可 以 将 多 个 选择 器 合并 到 一 条 规则 中 。 


13.92 更 大 的 控件 


新 设计 重新 定义 了 Bulma 控件 (按钮 、 输 入 框 、 下 拉 菜 单 、 分 页 链 
RF) 稍 大 一 点 ,没有 内 部 阴影 或 边框 。 
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新 的 控件 大 小 将 重复 使 用 多 次 ， 因 此 最 好 定义 一 个 新 变量 : 


Scontrol-size: 2.75em; 


有 一 些 Bulma 元 素 必 须 立 即 修 改 ， 效 果 见 图 13-12. 


.button， 

.input, 

.Select select, 

.pagination-previous, 

.pagination-next, 

.pagination-link { 
border-width: 0; 
box-shadow: none; 
height: Scontrol-size; 
padding-left: 1em; 
padding-right: 1em; 














图 13-12 
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带 有 图 标 和 下 拉 菜 单 的 控件 ， 也 必须 适 配 控件 变 大 ， 效 果 见 图 13-13. 


-control.has-icons-left { 
.input, 
.Select select { 
padding-left: $control-size; 
} 


.icon { 
height: Scontrol-size; 
width: $control-size; 
} 
} 


-select { 
&:not(.is-multiple) { 
height: $control-size; 
} 
} 
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.Select select { 
&:not([multiple]) { 
padding-right: Scontrol-size; 
} 
} 





Order by Publish date v 














图 13-13 


这 里 使 用 Sass 变量 非常 有 用 。 如 果 想 改变 Scontrol-size 的 值 , 只 需 
在 一 处 更 新 即 可 。 


现在 按钮 边框 已 被 删除 ， 但 仍 需要 按钮 轮廓 ， 效 果 见 图 13-14。 


.button { 
&.is-outlined { 
border-width: 2px; 
} 
} 











View all orders 


图 13-14 








最 后 要 更 新 文件 上 传 控件 ， 效 果 见 图 13-15. 


.file-cta, 

.file-name { 
background-color: $white; 
border-width: 0; 

} 





全 Choose a file... No file chosen 














图 13-15 
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13.9.3 ”使 用 Rubik 字 体 


Rubik 字体 更 醒目 ， 更 具 现 代 感 ， 这 使 得 它 适用 于 标题 、 标 签 和 按 
钮 等 交互 元 素 。 





修改 按钮 的 默认 背景 ， 并 使 用 大 写字 母 以 突出 文字 ， 如 图 13-16 
所 示 。 


.button { 
@extend “heading; 
background-color: rgba(#000, 0.05); 


text-transform: uppercase; 


} 
图 13-16 

















面包 届 元 素 同 理 ， 如 图 13-17 所 示 。 


.breadcrumb { 
@extend %heading; 
text-transform: uppercase; 


} 





BOOKS / NEW BOOK 














图 13-17 


要 使 分 页 项 看 起 来 更 像 按钮 ， 还 可 以 对 其 使 用 Rubik， 并 移 除 边 框 ， 
如 图 13-18 所 示 。 


.pagination { 
@extend %heading; 
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} 


-Pagination-previous, 

.pagination-next, 

-pagination-link { 
background-color: $ 
border-width: 0; 
min-width: $control 


} 


white; 


-size; 











1 45 a 47 86 
13-18 
13.9.4 ”修改 侧 边 栏 菜单 
目前 菜单 的 组 件 变 量 已 经 修改 为 灰 阶 ， 但 菜 六 缺乏 重点 


余部 分 的 设计 格格 不 入 。 


解决 方案 是 : 使 用 大 写 的 Rubik 字体 ， 如 图 13-19 所 示 。 


.menu { 
@extend %heading; 


text-transform: uppercase; 


} 








MENU 
@ DASHBOARD 
& BOOKS 
E CUSTOMERS 


f=) ORDERS 











图 13-19 
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现在 菜单 标签 已 经 不 再 是 必需 的 了 ,但 不 用 修改 所 有 的 HTML 文件 ， 
只 需 用 CSS 隐藏 它 : 


.menu-label { 
display: none; 


} 


使 用 Sass 嵌 套 ， 易 于 设置 菜单 列表 项 及 其 图 标的 样式 ， 效 果 见 
图 13-20。 


-menu-List { 
af 
padding: 0.75em 1em; 


.icon { 
color: $grey-light; 
margin-right: 0.5em; 


} 


&.is-active { 
box-shadow: $large-shadow; 














.icon { 
color: $red; 
} 
} 
} 
} 
DASHBOARD 
& BOOKS 

CUSTOMERS 
ORDERS 
图 13-20 





新 的 阴影 虽然 更 大 , 但 不 会 喧 宾 夺 主 , 并 强调 了 当前 激活 的 菜单 项 。 
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13.9.5 ”修补 导航 栏 


一 开始 引入 的 Starge-shadow 已 在 整个 设计 中 使 用 , 唯一 剩 下 的 阴影 
在 导航 栏 ， 下 面 更 新 它 : 


.Navbar { 
&.has-shadow { 
box-shadow: $large-shadow; 
} 
} 


目前 导航 栏 已 经 通过 Bulma 的 组 件 变量 定制 过 了 ， 但 是 需要 一 些 额 
外 的 间距 并 调整 大 小 ， 效 果 见 图 13-21。 


-Navbar-item, 
.navbar-Link { 

padding: ©.75rem 1.5rem; 
} 


.navbar-Link { 
padding-right: 2.5em; 
} 


-navbar-item { 
font-size: $size-5; 


} 


-Navbar-start { 
-Navbar-item { 
line-height: 1; 
padding-left: 0; 
} 
} 
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图 13-21 


这 样 所 有 元 素 就 更 紧密 地 结合 在 一 起 了 。 
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13.9.6 ”优化 表格 


管 表格 是 主要 内 容 所 在 ， 但 白色 背景 表格 与 界面 的 其 他 部 分 相 比 
显得 很 单调 。 


添加 阴影 ， 并 增 大 字号 ， 如 图 13-22 所 示 。 


.table { 
box-shadow: $large-shadow; 
font-size: 1.125rem; 





} 
Name Email Country Orders Actions 
John Miller johnmillerêgmail.com United States 7 EDIT DELETE 
Samantha Rogers samrogerségmail.com United Kingdom 5 EDIT DELETE 
Paul Jacques paul. jacques@gmail.com Canada 2 EDIT DELETE 
Name Email Country Orders Actions 














图 13-22 


13.9.7 ”标题 加 粗 


修改 标题 。 标 题 用 于 告诉 用 户 当前 在 哪 一 页 ， 因 此 应 强调 
my ir 层次 结构 ， 如 图 13-23 所 示 。 


.title { 
@extend %heading; 
} 


hi.title { 
font-weight: 700; 
text-transform: uppercase; 


} 
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13.10 ”使 用 Bulma 混入 实现 响应 式 

最 后 一 个 需要 修补 的 设计 很 难 定位 ， 因 为 它们 只 发 生 在 某 些 断 点 
前 后 。 

由 于 Bulma 是 完全 啊 应 式 的 ， 因 此 它 的 一 些 组 件 是 根据 视 口 大 小 设 
置 样式 的 。 
media 

dashboard.html 中 的 media 项 组 合 了 4 个 元 素 : 


口 2 个 media-left; 


口 1 个 media-content; 





O 1 个 media-right。 


这 使 得 该 组 件 在 移动 设备 上 会 被 挤 压 ， 如 图 13-24 所 示 。 


1 L 146 sold 
PAN 





全 














图 13-24 
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Pi Bay 4 个 元 素 ， 效 果 见 图 13-25. 


@include mobile() { 
-media { 
flex-direction: column; 


} 


-media-left { 
margin: © 0 0.5rem; 
} 
} 





FR 
g 


Learning Swift 
146 sold 














图 13-25 

mobile() 混 入 来 自 Bulma 自身 。 它 使 用 initial-variables.sass 中 定义 的 
$mobile 变量 断 点 ,因此 使 用 该 混入 ( 而 不 是 自己 编写 媒体 查询 ) 可 以 确 
保 这 里 编写 的 响应 式 代码 能 与 Bulma 的 响应 式 行为 同步 。 





最 后 修补 桌面 屏幕 上 的 导航 栏 下 拉 菜 单 ， 效 果 见 图 13-26。 


@include desktop() { 
.Navbar-dropdown .navbar-item { 
padding: 0.75rem 1.5rem; 


.icon { 
margin-right: 1em; 
} 
} 
} 
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@ Profile 
¥& Report bug 


中 Sign Out 











图 13-26 





desktop() 混 入 也 来 自 Bulma， 它 使 用 $desktop 变量 。 


13.11 小 结 


Bulma 是 用 Sass 编写 的 ， 易 于 自 定 义 。 通 过 覆盖 一 些 变量 ， 即 可 快 
速 地 将 默认 设计 转换 为 自己 的 品牌 设计 。 

许多 开发 人 员 使 用 Bulma 框架 来 实施 构建 ， 因 为 它 的 默认 值 合理 ， 
确保 了 界面 在 视觉 上 平衡 且 易 于 理解 。 要 添加 风格 , 也 只 需要 更 新 颜色 、 
添加 一 些 字体 ， 并 调整 间距 等 。 

Bulma 还 是 模块 化 的 : 可 以 使 用 相同 的 设置 选择 单独 导入 特定 组 件 
( 而 不 需要 导入 Bulma 的 其 余部 分 )。 每 个 组 件 都 有 自己 的 变量 集 。 要 想 
进一步 了 解 模 块 化 ， 可 查看 Bulma 文档 。 


访问 Bulma Expo 以 获取 灵感 ! 


Ta 


微 信 连 接 





微 博 连接 
关注 @ 图 灵 教 育 每 日 分 享 上 IT 好 书 


名 
QQ 连接 


ARS BARI: 218139230 
灵 读 者 官方 群 II: 164939616 














R] 





图 灵 社 区 
iTuring.cn 
在 线 出 版 , 电子 书 ,《 码 农 》 杂 志 , ARK 





六 


Bulma 是 基于 Flexbox 的 现代 CSS 框 架 ， 具 有 响应 式 、 模 块 化 、 可 定制 等 诸 
多 亮点 ， 而 且 语 法 简单 ， 轻 量 易 用 。 作 为 广 受 赞誉 的 开源 杰作 ，Bulma 还 拥有 丰 
富 的 组 件 和 文档 ， 对 初学 者 十 分 友好 ， 即 便 不 会 编写 CSS ， 也 能 轻松 上 手 。 
Bulma 的 目标 就 是 帮助 前 端 开 发 者 用 更 少 的 CSS 代 码 实 现 更 多 功能 。 

本 书 由 Bulma 之 父 执笔 ， 通 过 生动 的 示例 一 步 步 讲 解 如 何 用 Bulma 构 建 
Web 应 用 、 设 计 页 面 布局 、 创 建 自 定义 UI 元 素 和 和 组件， 以 及 与 JavaScript 框 架 集 
成 。 示 例 所 创建 的 系统 包含 了 所 有 网 站 或 内 容 管 理 系统 基本 都 具备 的 CRUD 功 
能 ， 极 具 指导 性 。 对 于 想 开发 优美 界面 和 华丽 网 站 的 前 端 开发 者 和 设计 师 来 说 ， 
本 书 不 容错 过 ! 
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v be = d7 » 
亚马逊 读者 评论 
@ 这 本 书 对 Bulma 这 个 CSS 框 架 进 行 了 全 面 且 深入 的 介绍 ， 是 对 原始 文档 的 
良好 补充 。 


© 这 本 书写 得 很 棒 ! 作者 仔细 讲解 了 现代 CSS 框 架 Bulma 的 基础 知识 。 你 可 
以 非常 轻松 地 将 书 中 介绍 的 技术 应 用 到 自己 的 Web 开 发 项 目 中 ! 


@ 对 Bulma 框 架 的 介绍 非常 实用 ， 虽 然 网 络 上 也 有 相关 资料 ， 但 这 本 书 结构 
安排 得 非常 合理 ， 讲 解 也 相当 细致 
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